// wijmo.input

.wj-content {
    &.wj-dropdown,
    &.wj-inputnumber,
    &.wj-inputmask,
    &.wj-calendar-outer,
    &.wj-pager {
        vertical-align: middle; // so labeledinput.css works in IE
        display: inline-table; // so height:100% works properly even without <!DOCTYPE html> tag
        border-collapse: separate;
    }
    //&:not(.wj-dropdown-panel):not(.wj-listbox):not(.wj-flexgrid):not(.wj-calendar-outer):not(.wj-multi-autocomplete) {
    //    border: $input-bdr;
    //}
}

// input group (used in DropDown, InputNumber)
.wj-control {

    .wj-template {
        position: relative;
        display: table-cell; // to work in Firefox, TFS 307664
    }

    .wj-template, .wj-input {
        height: 100%;
    }

    .wj-input-group {
        display: table;
        border-collapse: separate;
        width: 100%;
        height: 100%;

        .wj-input-group-btn {
            display: table-cell;
            width: 1%;
            height: 100%;
            min-width: 26px;
            white-space: nowrap;
            vertical-align: top;

            &:last-child:not(:first-child) > .wj-btn {
                border-left: $wj-btn-grp-bdr;
            }

            &:first-child:not(:last-child) > .wj-btn {
                border-right: $wj-btn-grp-bdr;
            }
        }

        .wj-form-control {
            display: table-cell;
            padding: 4px 8px;
            background: transparent; // $wj-bkg;
            color: inherit; // TFS 347871
            border: none;
            width: 100%;
            height: 100%;
            min-height: 2em; // for compatibility with legacy wijmo.css
        }
    }

    .wj-btn-group {
        display: inline-block;
        border: $wj-btn-grp-bdr;
        border-radius: $wj-bdr-rad;
        overflow: hidden;

        > *:not(:first-child) {
            border-left: $wj-btn-grp-bdr;
        }

        > .wj-form-control {
            padding: $wj-item-pdg;
            background: transparent;
            border: none;

            &:not(:first-child) {
                border-left: $wj-btn-grp-bdr;
            }
        }
    }

    .wj-btn-group > .wj-btn,
    .wj-input-group-btn > .wj-btn {
        height: 100%;
        min-height: 2em; //  to avoid blank space in IE9 and some versions of Chrome
        @include backgradient($wj-btn-bkg, $wj-btn-grd);

        &:focus, &:hover {
            @include backgradient($wj-btn-hvr, $wj-btn-grd);
            transition-duration: $wj-tdn-focus;
        }

        &.wj-btn-default {
            background: transparent;
            color: $wj-txt;

            &:focus, &:hover {
                @include backgradient($wj-btn-hvr, $wj-btn-grd);
                transition-duration: $wj-tdn-focus;
            }
        }
    }
    // adjust group borders in RTL controls
    &.wj-rtl {
        .wj-input-group-btn {
            &:last-child:not(:first-child) > .wj-btn {
                border-right: $wj-btn-grp-bdr;
                border-left: none;
            }

            &:first-child:not(:last-child) > .wj-btn {
                border-left: $wj-btn-grp-bdr;
                border-right: none;
            }
        }

        .wj-btn-group {
            > *:not(:first-child) {
                border-right: $wj-btn-grp-bdr;
                border-left: none;
            }

            > .wj-form-control {
                &:not(:first-child) {
                    border-right: $wj-btn-grp-bdr;
                    border-left: none;
                }
            }
        }
    }
}

// input number
.wj-inputnumber {
    input.wj-form-control {
        text-align: right;
    }
}

// listbox
.wj-listbox {
    overflow: auto;
    cursor: default;

    .wj-listbox-item {
        padding: $wj-item-pdg;

        &.wj-separator {
            height: 1px;
            margin: 3px 0;
            padding: 0;
            background: rgba(0,0,0,.1);
        }

        &.wj-header {
            opacity: 1;
            position: sticky;
            top: 0;
        }

        &.wj-state-selected {
            transform: scale(1); // workaround for Chrome 70 bug (TFS 349534)
        }

        &:not(.wj-state-selected):not(.wj-state-disabled):not(.wj-separator):hover {
            background: $wj-item-hvr;
            transition-duration: $wj-tdn-focus;
        }

        label {
            font-weight: normal;
            margin: 0;
        }
    }
}

// calendar
.wj-calendar {

    .wj-header {
        font-size: 90%;
    }

    .wj-day-today {
        font-weight: bold;
    }

    .wj-day-othermonth {
        opacity: 0.65;
    }

    .wj-calendar-outer {
        display: block;
        padding: 10px;
        width: 100%;
        height: auto;
        cursor: default;
    }

    .wj-calendar-header {
        display: block;
        padding: 0 0 15px 0;
        width: 100%;

        .wj-month-select {
            display: inline-block;
            cursor: pointer;
        }

        .wj-btn-group {
            float: right;
            margin-bottom: 7px;

            .wj-btn {
                padding: 2px 8px 0 8px;
            }
        }
    }

    .wj-calendar-month {
        width: 100%;
        border-collapse: collapse;
        font: inherit;

        td {
            width: 14.29%;
        }
    }

    .wj-calendar-year {
        width: 100%;
        border-collapse: collapse;
        font: inherit;

        td {
            width: 25%;
        }

        tr:not(.wj-header) td {
            height: 3em;
        }
    }

    td {
        text-align: center;
        padding: $wj-item-pdg;
        border: none;
    }

    &.wj-dropdown-panel {
        width: 23em;
    }


    &.wj-rtl {
        .wj-calendar-header {
            .wj-btn-group {
                float: left;

                .wj-btn {
                    .wj-glyph-right, .wj-glyph-left {
                        transform: scale(-1, 1);
                    }
                }
            }
        }
    }
}

.wj-dropdown-panel .wj-calendar-outer {
    border: none;
    background: none;

    > .wj-content {
        display: block;
    }
}

.wj-yearpicker {
    max-height: 12em;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 4em; // grid fall-back
    text-align: center;

    .wj-listbox-item {
        text-align: center;
        display: inline-block; // grid fall-back
        width: 4em;
    }
}

// color picker
.wj-colorpicker {
    width: 420px;
    height: 200px;
    padding: 4px;

    .wj-colorbox {
        position: relative;
        width: 100%;
        height: 100%;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
}

// input color
.wj-inputcolor {
    .wj-input-group input.wj-form-control {
        padding-left: 24px;
    }

    .wj-inputcolorbox {
        position: absolute;
        left: 6px;
        top: 6px;
        bottom: 6px;
        width: 12px;
        border: 1px solid black;
    }

    &.wj-rtl {
        .wj-input-group input.wj-form-control {
            padding-left: 4px;
            padding-right: 24px;
        }

        .wj-inputcolorbox {
            left: auto;
            right: 6px;
        }
    }
}

// autocomplete
.wj-listbox.wj-dropdown-panel {
    .wj-autocomplete-match {
        font-weight: bold;
    }
}

// multi-autocomplete
.wj-multi-autocomplete {
    width: 100%;
    padding: 5px;

    .wj-input {
        float: left;
    }

    .wj-input-group .wj-form-control {
        margin-top: 5px;
        height: auto;
    }

    .wj-token {
        @include backgradient($wj-btn-bkg, $wj-btn-grd);
        color: $wj-btn-txt;
        border: $wj-bdr;
        border-radius: $wj-bdr-rad;
        margin: 5px;
        vertical-align: middle;
        float: left;
        cursor: default;

        &:focus, &:hover, &.wj-token-active { // REVIEW: use wj-state-active instead?
            @include backgradient($wj-btn-hvr, $wj-btn-grd);
            transition-duration: $wj-tdn-focus;
        }

        .wj-token-label {
            padding: $wj-item-pdg;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            max-width: 500px;
        }

        .wj-token-close {
            padding: $wj-item-pdg;
            color: $wj-btn-txt;
            vertical-align: middle;
            cursor: pointer;
            text-decoration: none;

            &:hover, &:focus {
                opacity: .5;
                transition-duration: $wj-tdn-focus;
            }
        }
    }

    .wj-token-helper {
        position: absolute;
        left: -10000px;
    }
}

// popups/dialogs
.wj-popup {
    //@include backgradient($wj-bkg, $wj-bkg-grd);
    background: $wj-bkg; // no gradient on popup background
    box-shadow: $wj-box-shadow;
    margin: 2px 0;

    .wj-dialog-header {
        width: 100%;
        @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
        color: $wj-hdr-txt;
        font-weight: bold;
        font-size: 120%;
        padding: 1em;
    }

    .wj-dialog-body {
        padding: 1em;
    }

    .wj-dialog-footer {
        text-align: right;
        margin-top: 1em;
        padding: 1em;
    }
}

.wj-popup-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
}

// menu
.wj-menu .wj-form-control {
    cursor: pointer;
}

.wj-listbox.wj-menu-items {

    .wj-listbox-item:not(.wj-state-disabled):not(.wj-separator) {
        cursor: pointer;
    }

    .wj-listbox-item.wj-subitems {
        position: relative;

        &:after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            opacity: .75;
            border-top: .4em solid transparent;
            border-bottom: .4em solid transparent;
            border-left: .5em solid;
        }
    }

    &:not(.wj-rtl) .wj-listbox-item.wj-subitems {
        padding-right: 1.8em;

        &:after {
            right: .55em;
        }
    }

    &.wj-rtl .wj-listbox-item.wj-subitems {
        padding-left: 1.8em;

        &:after {
            left: .55em;
            transform: translate(0, -50%) scale(-1, 1)
        }
    }
}

// pager
.wj-pager {
    .wj-input-group {
        .wj-input-group-btn > .wj-btn {
            min-width: 40px;
        }

        .wj-form-control {
            text-align: center;
            border-left: 1px solid rgba(0,0,0,0.2);
            border-right: 1px solid rgba(0,0,0,0.2);
        }
    }
}

