@import "../variables/dimensions";
@import "../variables/colors";
@import "../rc-font/variables";
@import "icons";
@import "../mixins";

$checkbox-shadow-width: 4px !default;

input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    line-height: 1;
    font-family: 'rc-font' !important;
    &:after {
        @include rcIcon();
        color: $customControlsColor;
        position: relative;
    }
    &:focus:after {
        text-shadow: $customControlsTextShadowFocus;
        background: $customControlsBgColorFocus;
    }
    &:hover:after {
        color: darken($customControlsColor, 15%);
    }
    &:disabled:after {
        color: $customControlsDisabledColor;
    }
}

input[type="radio"] {
    &:after {
        content: getIcoMoonContent($rc-icon-radio-button-unselected);
    }
    &:checked:after {
        content: getIcoMoonContent($rc-icon-radio-button-selected);
    }
}

input[type="checkbox"] {
    &:after {
        content: getIcoMoonContent($rc-icon-checkbox-unselected);
    }
    &:checked:after {
        content: getIcoMoonContent($rc-icon-checkbox-selected);
    }
    &:indeterminate:after {
        content: getIcoMoonContent($rc-icon-checkbox-mix);
    }
}

.form-inline {
    input[type="radio"],
    input[type="checkbox"] {
        &:after {
            top: 1px;
        }
    }
}

.rc-select {
    position: relative;
    display: block;
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        padding-right: 20px; // compensate icon
    }
    &:after {
        @include rcIcon();
        content: getIcoMoonContent($rc-icon-chevron-down-big);
        position: absolute;
        right: 8px;
        top: 50%;
        font-size: $font-size-base !important;
        margin-top: -($font-size-base / 2);
        pointer-events: none;
    }
}

.form-inline .rc-select {
    display: inline-block;
}

.multi-select-option.multi-select-option-level-1 {
  padding-left: $grid-gutter-width - $checkbox-shadow-width;
  label, .option-label {
    padding-left: $default-padding + $checkbox-shadow-width;
  }
}
