$mbsc-ios-accent:  $datepicker-accent-color !default;
$mbsc-material-accent: $datepicker-accent-color !default;
$mbsc-mobiscroll-accent: $datepicker-accent-color !default;

$mbsc-ios-text: $datepicker-text-color !default;
$mbsc-material-text: $datepicker-text-color !default;
$mbsc-mobiscroll-text: $datepicker-text-color !default;

$mbsc-ios-background: $datepicker-background-color !default;
$mbsc-material-background: $datepicker-background-color !default;
$mbsc-mobiscroll-background: $datepicker-background-color !default;

@import "../external-libs/Mobiscroll/css/mobiscroll.jquery.scss";

.mbsc-mobiscroll {

    .mbsc-fr-hdr {
        color: $color-secondary;
        font-weight: $font-weight-bold;
        font-size: 12px;
        font-family: $datepicker-font-family;
    }

    .mbsc-cal .mbsc-cal-btn{
        font-size: 18px;
        color: $text-color;
    }

    .mbsc-cal-days > div {
        border-bottom: $default-border;
        color: $text-color;
        font-family: $datepicker-font-family;
        font-weight: $font-weight-bold;
    }

    .mbsc-cal-month, .mbsc-cal-year{
        font-family: $datepicker-font-family;
    }

    .mbsc-cal-today {
        background-color: $color-gray-95;
        color: $text-color;
        border-radius: 2em; 
    }

    .mbsc-sc-whl-l {
        border-top: $default-border;
        border-bottom:$default-border;
    }

    .mbsc-sc-itm .mbsc-btn-e .mbsc-sc-itm-sel {
        border-radius: $btn-border-radius;
    }


    &.mbsc-no-touch .mbsc-sc-btn:hover:before, &.mbsc-sc .mbsc-sc-whl .mbsc-sc-itm.mbsc-active, .mbsc-sc-btn.mbsc-active:before{
        background: $btn-active-default-bg;
        color: $btn-primary-color;
    }

    .mbsc-fr-btn.mbsc-active, &.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-disabled):hover{
        background: $btn-active-default-bg;
        color: $btn-primary-color;
    }

    .mbsc-fr-btn {
        color: $color-secondary;
        font-weight: $font-weight-bold;
        font-size: 12px;
        font-family: $datepicker-font-family;
        text-transform: none;
        letter-spacing: 1px;
        border-radius: $btn-border-radius;
        @include embla-button-variant($btn-link-color, $btn-link-bg, $btn-link-border, $btn-link-color, $btn-hover-link-bg, $btn-hover-link-border, $btn-active-link-color, $btn-active-link-bg, $btn-active-link-border);
    
        &:hover, &:active, &:focus {
          text-decoration: none;
        }
    }
}

.form-control.mbsc-comp {
    &[readonly] {
      & + .input-group-addon {
        background-color: $color-white;
        border-color: $input-border;
        color: $color-gray-70;
      }
    }
}

.mbsc-comp:read-only{
    background-color: $color-white;
}