@import "../../base";
@import "./config";

.root {
  position: relative;
  height: $calendar-total-height;
  font-size: $font-size-small;
  line-height: $calendar-row-height;
  text-align: center;
  background: $calendar-primary-contrast-color;
  .prev, .next {
    position: absolute;
    top: 0;
    z-index: $z-index-high;
    width: $calendar-row-height;
    height: $calendar-row-height;
    font-size: $calendar-arrows-font-size;
    line-height: $calendar-row-height;
    color: $calendar-arrows-color;
    text-align: center;
    cursor: pointer;
    opacity: .7;
  }
  .prev {
    left: 0;
  }
  .next {
    right: 0;
  }
}

.title {
  font-weight: 500;
}

.years {
  height: 100%;
  overflow: scroll;
  font-size: $font-size-big;
  > li {
    line-height: 2.4;
    cursor: pointer;
    &.active {
      font-size: $calendar-year-font-size;
      color: $calendar-primary-color;
    }
  }
}

.week {
  display: flex;
  height: $calendar-row-height;
  flex-wrap: wrap;
  font-size: $calendar-day-font-size;
  line-height: $calendar-row-height;
  opacity: .5;
  > span {
    flex: 0 0 (100% / 7);
  }
}

.days {
  display: flex;
  flex-wrap: wrap;
  font-size: $calendar-day-font-size;
}

.day {
  flex: 0 0 (100% / 7);
  padding: $calendar-day-padding;
  > span {
    display: inline-block;
    width: $calendar-row-height;
    height: $calendar-row-height;
    line-height: $calendar-row-height;
    border-radius: 50%;
  }
  &:hover:not(.active):not(.disabled) > span {
    color: $calendar-primary-contrast-color;
    background: $calendar-primary-hover-color;
  }
  &.active > span {
    color: $calendar-primary-contrast-color;
    background: $calendar-primary-color;
  }
  &:hover:not(.disabled) > span {
    cursor: pointer;
  }
  &.disabled {
    opacity: $calendar-day-disable-opacity;
  }
}

.month {
  background-color: $calendar-primary-contrast-color;
}

.ripple {
  opacity: .5;
  transition-duration: $calendar-arrows-ripple-duration;
}