//== Kiosk
//----------------------------------------
.kiosk {
	margin: 25px 0;
}

//== Logo
//----------------------------------------
.kiosk-logo {
	@include td-margin(right, 15px);
	line-height: $line-height-base;
	vertical-align: text-bottom;
}

.kiosk-logo-group {
	width: 60px;
}

.kiosk-logo-openki {
	width: 50px;
}

//== Heading
//----------------------------------------
.kiosk-heading {
	@include td-margin-all(0, 15px, 0, 0);
	display: inline-block;
	font-size: $font-size-h1;
	line-height: $line-height-base;
	padding-bottom: 15px;
}

//== Region selection
//----------------------------------------
.kiosk-language-selection {
	display: inline-block;
	line-height: $line-height-base;
}

.kiosk-language-selection > li {
	list-style: none;
}

.kiosk-language-selection > li > .fa {
	color: $blue;
}

.kiosk-language-selection > li > .dropdown-menu {
	@include td-pos(left, auto);
	@include td-pos(right, 0);
}

//== Clock
//----------------------------------------
.kiosk-moment {
	@include td-float(right);
	line-height: $line-height-base;
}

.kiosk-moment-time {
	font-size: $font-size-h2;
}

.kiosk-moment-date {
	@include td-margin(left, 5px);
	font-size: $font-size-h4;
}

.kiosk-event-list {
	@include clearfix;
	margin: ($kiosk-wrap-padding-vertical * -1) ($kiosk-wrap-padding-horizontal * -1);
	width: auto;
}

// *** Kiosk event ***
//====================

// ** Wrap
//========================================================================================
.kiosk-event-wrap-ongoing {
	@include td-make-xs-column(6);
	@include td-make-sm-column(4);
	@include td-make-md-column(2);
	padding: $kiosk-wrap-padding-vertical $kiosk-wrap-padding-horizontal;
}

.kiosk-event-wrap-today,
.kiosk-event-wrap-upcoming {
	@include td-make-xs-column(6);
	@include td-make-md-column(3);
	@include td-make-lg-column(2.4);
	padding: $kiosk-wrap-padding-vertical $kiosk-wrap-padding-horizontal;
}

// ** Event
//========================================================================================
.kiosk-event-ongoing {
	background-color: rgba($orange, .3);
}

.kiosk-event-ongoing,
.kiosk-event-today {
	height: 200px;
}

.kiosk-event-upcoming {
	height: 150px;
}

.kiosk-event-today,
.kiosk-event-upcoming {
	background-color: $event-body-bg;
}

// ** Timecount
//========================================================================================
.kiosk-event-timecount {
	padding: 2px ($grid-gutter-width / 3);
}

$event-ongoing-header-bg: $beige;

.kiosk-event-ongoing > .kiosk-event-timecount {
	background-color: lighten($event-ongoing-header-bg, 18%);
}

.kiosk-event-today > .kiosk-event-timecount,
.kiosk-event-upcoming > .kiosk-event-timecount {
	background-color: lighten($event-header-bg, 13%);
}

// ** Header
//========================================================================================
$kiosk-event-component-padding-vertical: $grid-gutter-width / 3;
$kiosk-event-component-padding-horizontal: $grid-gutter-width / 2;

.kiosk-event-header {
	@include clearfix;
	color: $gray-dark;
	font-size: medium;
	padding: $kiosk-event-component-padding-vertical $kiosk-event-component-padding-horizontal;
}


.kiosk-event-ongoing > .kiosk-event-header {
	background-color: $event-ongoing-header-bg;
}

.kiosk-event-today > .kiosk-event-header,
.kiosk-event-upcoming > .kiosk-event-header {
	background-color: $event-header-bg;
}

// ** Moment & Location
//========================================================================================
.kiosk-event-moment,
.kiosk-event-location {
	@include ellipsis;
}

.kiosk-event-today .kiosk-event-moment,
.kiosk-event-today .kiosk-event-location,
.kiosk-event-upcoming .kiosk-event-moment,
.kiosk-event-upcoming .kiosk-event-location {
	width: 50%;
}

// ** Moment
//========================================================================================
.kiosk-event-today .kiosk-event-moment,
.kiosk-event-upcoming .kiosk-event-moment {
	@include td-float(left);
	@include td-text-align(left);
}

// ** Location
//========================================================================================
.kiosk-event-today .kiosk-event-location,
.kiosk-event-upcoming .kiosk-event-location {
	@include td-float(right);
	@include td-text-align(right);
}

// ** Body
//========================================================================================
.kiosk-event-body {
	border-top: $event-compact-seperator-height solid $body-bg;
	padding: $kiosk-event-component-padding-vertical $kiosk-event-component-padding-horizontal;
}

// ** Title
//========================================================================================
.kiosk-event-title {
	color: $gray-dark;
	margin: 0;
}

// ** Description
//========================================================================================
.kiosk-event-description {
	margin: 0;
}
