@include exports("datetime/layout") {

    // Common
    .k-dateinput,
    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        width: $input-default-width;
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        background: none;
        display: inline-flex;
        vertical-align: middle;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        // Wrappers
        .k-dateinput-wrap,
        .k-picker-wrap {
            @include use-background-clip();
            @include border-radius( $input-border-radius );
            padding: 0;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            position: relative;
            transition: all .1s ease; // sass-lint:disable-block no-transition-all
            cursor: default;
            outline: 0;

            .k-input {
                padding: $input-padding-y $input-padding-x;
                width: 100%;
                height: calc( #{$input-padding-y * 2} + #{$input-line-height * 1em} );
                box-sizing: border-box;
                border: 0;
                outline: 0;
                color: inherit;
                background: none;
                font: inherit;
                flex: 0 1 auto;
                display: flex;
                align-items: center;
                overflow: hidden;
                text-overflow: ellipsis;

                .k-edge & {
                    min-width: 0;
                }
            }

            .k-select {
                @include border-right-radius-only();
                padding: 0;
                border-width: 0;
                box-sizing: border-box;
                border-style: solid;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                text-align: center;
                cursor: pointer;

                .k-icon {}
            }
        }

        &[dir="rtl"],
        .k-rtl & {
            text-align: right;

            .k-select {
                @include border-left-radius-only();
            }
        }

        ::-ms-clear {
            display: none;
        }
    }

    // Datepicker
    .k-datepicker,
    .k-datetimepicker,
    .k-timepicker {
        .k-select {
            padding: 0;
            width: $spinner-width;
            border-width: 0;
        }

        .k-i-warning {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            overflow: visible;
        }

        .k-state-invalid {
            .k-i-warning {
                display: inline-block;
            }
        }

        .k-widget.k-dateinput {
            width: 100%;
            flex: 1 1 auto;
            margin: 0;
        }

        .k-dateinput-wrap {
            border: 0;
            @include border-left-radius-only();
        }

        .k-picker-wrap {
            &.k-state-invalid {
                transition: none;
            }
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                right: auto;
            }
        }
    }

    .k-datepicker,
    .k-timepicker {

        .k-i-warning {
            right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
            }
        }
    }

    // Timepicker
    .k-timepicker {}

    // Datetimepicker
    .k-datetimepicker {

        .k-select {
            padding: 0;
            width: auto;
            border-left-width: 0;
            align-items: stretch;
        }

        .k-link {
            padding: 0;
            width: $button-inner-calc-size;
            height: 100%;
            border-width: 0;
            border-style: solid;
            border-color: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .k-i-warning {
            right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
            }
        }
    }

    .k-datetime-container {

        .k-datetime-wrap {
            width: $datetime-width;
            overflow: hidden;
        }

        .k-datetime-buttongroup {
            padding: $button-padding-x;
        }

        .k-datetime-selector {
            display: flex;
            transition: transform .2s;
        }

        .k-datetime-calendar-wrap,
        .k-datetime-time-wrap {
            text-align: center;
            flex: 0 0 $datetime-width;
        }

        .k-time-list-container {
            justify-content: center;
        }

        .k-time-tab {

            .k-datetime-selector {
                transform: translateX(-100%);
            }
        }

        > .k-popup {
            padding-bottom: 0;

            .k-action-buttons {
                margin-bottom: 0;
            }
        }
    }

    // Dateinput
    .k-dateinput {
        .k-select {
            padding: 0;
            border-width: 0;
            width: $spinner-width;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .k-link {
            width: 100%;
            flex: 1 1 auto;
            display: block;
            overflow: hidden;
            position: relative;

            .k-icon {
                position: absolute;
                right: 50%;
                transform: translateX(50%);
            }
        }

        .k-link-increase .k-icon {
            bottom: -$spinner-icon-offset;
        }

        .k-link-decrease .k-icon {
            top: -$spinner-icon-offset;
        }

        .k-i-warning {
            display: none;
            position: absolute;
            right: $padding-x;
            top: 50%;
            transform: translateY(-50%);
            overflow: visible;
        }

        &.k-state-invalid .k-i-warning {
            display: inline-block;
        }

        .k-rtl &,
        &[dir="rtl"] {
            .k-i-warning {
                left: $padding-x;
                right: auto;
            }
        }

    }

    // Infinite timepicker
    // Header
    .k-time-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2 * $padding-y $padding-x * 2;
        line-height: $timepicker-header-height;

        .k-title {
            font-weight: bold;
        }

        .k-time-now {
            border-width: 0;
            line-height: inherit;
            cursor: pointer;
        }
    }

    // Content
    .k-time-list-wrapper {
        display: inline-block;
        overflow: hidden;
        box-sizing: content-box;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        padding: $time-list-padding 0;
        text-align: center;
        min-width: $time-list-width;
        height: $time-list-height;
        flex: 1 1 auto;

        .k-title {
            display: block;
            text-align: center;
            font-size: $font-size-xs;
            position: absolute;
            text-transform: capitalize;
            font-weight: bold;
            min-width: 100%;
            height: 1.5em;
            line-height: 1.5em;
            margin-top: -$time-list-padding;
            z-index: 12;
        }

        &.k-state-focused {
            &::before,
            &::after {
                display: block;
                content: " ";
                position: absolute;
                width: 100%;
                left: 0;
                pointer-events: none;
                height: calc(50% - 1em);
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
            }

            &::before {
                top: 0;
            }

            &::after {
                bottom: 0;
            }
        }
    }

    .k-time-container {
        position: absolute;
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: $line-height;
        left: 0;
        right: 0;
        top: $time-list-padding;
        bottom: $time-list-padding;

        @include hide-scrollbar("right");

        > ul {
            height: auto;
            width: $time-list-width;
            margin: auto;
        }
    }

    .k-time-list-container {
        display: flex;
        position: relative;
    }

    .k-time-list {
        position: absolute;
        display: flex;
        z-index: 10;
        outline: 0;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: " ";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
        }

        &::before { top: 0; }
        &::after { bottom: 0;}
    }

    .k-time-list .k-item {
        padding: $list-item-padding-y $list-item-padding-x;
        min-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
        line-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
    }

    .k-time-highlight {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
        height: $button-inner-calc-size;
        z-index: 1;
        border-width: $time-highlight-size 0;
        border-style: solid;
        border-radius: .1px; // workaround for https://bugs.webkit.org/show_bug.cgi?id=175117
    }

    .k-time-container .k-scrollable-placeholder {
        position: absolute;
        width: 1px;
        top: 0;
        right: 0;
    }

    .k-time-separator {
        display: inline-flex;
        align-self: center;
        justify-content: center;
        height: 100%;
        z-index: 11;
    }
}