// wijmo core

// primary control class: applies to all Wijmo controls
.wj-control {
    display: block;
    box-sizing: border-box;
    color: $wj-txt;
    @include backgradient($wj-bkg, $wj-bkg-grd);
    @include prefix(user-select, none, webkit moz ms);

    * {
        box-sizing: inherit;
    }

    &[disabled] { // disabled controls (TFS 330684)
        opacity: $wj-disabled-opacity;
        cursor: default;
        pointer-events: none;
    }
    // to make contenteditable work on iOS
    // http://stackoverflow.com/questions/21295698/html5-contenteditable-attribute-not-working-properly-on-ios7-mobile-safari
    [contenteditable] {
        @include prefix(user-select, text, webkit moz ms); // Required on iOS
    }
    // remove focus outline
    &:focus, *:focus, a:focus {
        outline: none;
    }
    // remove browser-specific elements from input controls
    input {

        &::-ms-clear { // remove clear button in IE input elements
            display: none;
        }

        &[type=number] { // spinner buttons in Chrome
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }

        &:invalid { // red outline validation in Firefox
            box-shadow: none;
            outline: none; // TFS 327581
        }
    }
    // button elements
    .wj-btn {
        @include backgradient($wj-btn-bkg, $wj-btn-grd, $wj-btn-bkg, rgba(0,0,0,.1));
        color: $wj-btn-txt;
        cursor: pointer;
        display: inline-block;
        border-style: none;
        padding: 0 10px;
        text-align: center;
        min-width: 30px;
        white-space: nowrap;

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

        &[disabled] { // disabled buttons in controls
            opacity: $wj-disabled-opacity;
            cursor: default;
            pointer-events: none;
        }
    }
    // button-styled links
    a.wj-btn,
    button.wj-btn:not(.wj-btn-default) { // not for buttons in input controls
        border-radius: $wj-bdr-rad;
        padding: 6px 15px;
        text-decoration: none;
        font-weight: bold;
        font-size: 12px;
    }
}

// moved to top level for backward compatibility
.wj-header {
    @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
    color: $wj-hdr-txt;
    font-weight: bold;
}

.wj-state-selected {
    background: $wj-sel-bkg;
    color: $wj-sel-txt;
}

.wj-state-multi-selected {
    background: $wj-msel-bkg;
    color: $wj-msel-txt;
}

.wj-state-disabled {
    opacity: $wj-disabled-opacity;
    cursor: default;
    pointer-events: none;
}

// inline control class: includes border
.wj-content {
    display: inline-block;
    border: $wj-bdr;
    border-radius: $wj-bdr-rad;
    overflow: hidden;
}

.wj-tooltip {
    box-sizing: border-box;
    position: absolute;
    pointer-events: none;
    max-width: 400px;
    padding: $wj-item-pdg;
    background: $wj-tooltip;
    color: $wj-tooltip-txt;
    border: $wj-bdr;
    border-radius: $wj-bdr-rad;
    box-shadow: $wj-box-shadow;
}

// used in drop-downs and other controls
.wj-dropdown-panel {
    box-shadow: $wj-box-shadow;
}

