/*
Downloaded mobiscroll at https://download.mobiscroll.com/
Choose Components:
- Calendar

Choose Themes:
- Mobiscroll
- iOS
- Material

Choose Icon Set:
- None selected
*/

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

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

  .mbsc-cal .mbsc-cal-btn {
    align-self: center;
    color: $text-color;
    font-size: 12px;
  }

  .mbsc-cal-day-date {
    font-size: $font-size-medium;
    transition: background-color $default-transition;
  }

  // Today
  .mbsc-cal-today {
    color: unset;

    .mbsc-cal-day-date {
      background-color: $datepicker-today-background-color;
    }
  }

  // Selected day
  .mbsc-cal-c .mbsc-cal .mbsc-cal-body .mbsc-cal-row .mbsc-selected {
    .mbsc-cal-cell-txt {
      background: $datepicker-background-color;
      border: $datepicker-selected-border;
      border-radius: 2em;
      color: $datepicker-selected-text-color;
    }

    &.mbsc-cal-today {
      .mbsc-cal-cell-txt {
        background: $datepicker-today-background-color;
      }
    }
  }

  .mbsc-cal-days > div {

    @include heading-h5();
    border-bottom: $default-border;
    padding-bottom: $padding-s;
    padding-top: $padding-s;
  }

  .mbsc-cal-month,
  .mbsc-cal-year {
    @include heading-h5();
    line-height: inherit;
  }

  .mbsc-sc-whl-l {
    border-bottom: $default-border;
    border-top: $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 {
    @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);
    border-radius: $btn-border-radius;
    font-family: $datepicker-font-family;
    font-size: 12px;
    font-weight: $font-weight-bold;
    letter-spacing: 1px;
    text-transform: none;

    &:hover,
    &:active,
    &:focus {
      text-decoration: none;
    }
  }
}

.form-control.mbsc-comp {
  &[readonly] {
    cursor: pointer;

    & + .input-group-append {
      > .input-group-text {
        background-color: $color-white;
        border-color: $input-border-color;
        color: $color-gray-70;
        cursor: pointer;
      }
    }
  }

  &[disabled] {
    cursor: not-allowed;

    & + .input-group-append {
      > .input-group-text {
        background-color: $color-white;
        border-color: $input-border-color;
        color: $color-gray-70;
        cursor: not-allowed;
      }
    }
  }

  & + .input-group-append {
    .input-group-text {
      svg.embla-icon {
        color: $icon-color;
        cursor: inherit;
        fill: $icon-color;
        margin-right: -$margin-s;
        padding: 0;
      }
    }
  }
}

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

.mbsc-mobiscroll.mbsc-fr-no-overlay.mbsc-fr-bubble .mbsc-fr-w {
  border: $dropdown-border;
  border-radius: $dropdown-border-radius;
}

.mbsc-mobiscroll.mbsc-fr-no-overlay .mbsc-fr-w {
  @include box-shadow($dropdown-box-shadow);
}

.mbsc-mobiscroll .mbsc-fr-w {
  background-color: $color-white;
  color: $text-color;

  font-family: $datepicker-font-family;
}

.mbsc-fr-popup {
  padding-bottom: $padding-s;
  padding-top: $padding-s;
}

// Calendar cell hover
.mbsc-mobiscroll.mbsc-no-touch:not(.mbsc-ev-cal) .mbsc-cal-cell:not(.mbsc-disabled):hover .mbsc-cal-cell-txt,
.mbsc-mobiscroll.mbsc-no-touch .mbsc-cal-day:not(.mbsc-disabled) .mbsc-cal-day-date:hover,
.mbsc-mobiscroll .mbsc-cal-cell:focus .mbsc-cal-cell-txt {
  background: $datepicker-hover-background-color;
}

// Timepicker hover color
.mbsc-mobiscroll.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover,
.mbsc-mobiscroll .mbsc-sc-itm:focus {
  background: $datepicker-hover-background-color;
}