@import "../../../../../style/mixin";

@include export-module('sc-calendar') {
  .sc-calendar {

    .calendar-header-row{
      flex-direction: row;
      box-sizing: border-box;
      display: flex;
      place-content: center space-between;
      align-items: center;
    }

    .pointer-hover {
      cursor: pointer;
    }

    icon {
      width: 20px;
      height: 20px;
    }

    .month, .year {
      user-select: none;
    }

    .month {
      margin-right: 10px;
    }

    .select-month-year-window {
      z-index: 9001;
      background: white;
    }

    default-ok-cancel-buttons {
      align-self: center;
    }

    .vertical-divider {
      flex: 0 0;
      padding: 0;
      height: 80%;
      flex-basis: 1px;
      margin-top: 5px;
    }

    .selected-month {
      color: $color-light;
    }

    .input-date-window {
      &.expanded {
        box-shadow: 0 0 5px 0 rgba(72,79,96,0.25);
        border: 1px solid;
        border-radius: 5px;
      }
      position: relative;
      z-index: 1000;
      transform-origin: center;
      pointer-events: none;
    }

    .calendar-content {
      pointer-events: initial;
      background: $color-light;
    }

    .month-changer {
      height: 40px;
      .month-change {
        opacity: 0.5;
        &:hover {
          opacity: 1;
        }
      }
    }

    .month-year-display {
      margin-left: 10px;
    }

    .view-changer icon {
      width: 20px;
      height: 20px;
      [fill] {
        fill: $color-action;
      }
    }


    .week-row {
      flex-direction: row;
      box-sizing: border-box;
      display: flex;
      > div {
        flex: 1;
        text-align: center;
        line-height: 33px;
      }
    }

    .week-day-label,
    .week-acronym,
    .week-number {
      background: $color-less-light;
    }

    .week-day-label,
    .week-number {
      font-weight: bold;
      border: 0 solid $color-light;
    }

    .week-number {
      border-top-width: 1px;
    }

    .week-day-label {
      border-left-width: 1px;
    }

    .week-acronym {
      color: $color-grey;
    }

    .calendar-view,
    .week-day {
      cursor: pointer;
      border: 1px solid transparent;
      &.in-month {
        color: $color-dark;
      }
      &.is-selected,
      &:hover {
        color: $color-light;
        font-weight: normal;
      }
      &.is-today {
        color: $color-action;
        font-weight: bold;
      }
      &.is-selected {
        color: $color-light;
        background: $color-active !important;
        border-color: $color-active !important;
        border-radius: 0;
      }
      &:hover {
        background: $color-active-accent;
        border-color: $color-active-accent;
      }
    }

    .week-day {
      color: $color-grey;
      //border-radius: 50%;
    }

    .calendar-view {
      line-height: 45px;
      text-align: center;
      border-radius: 10px;
      width: 69px;
    }
  }
}