@import "colors/index";

$calendar-bg: $color-bg-med;
$calendar-title-bg: $color-bg-light;
$calendar-hover-bg:  $color-blue-med;
$calendar-today-bg: $color-green;
$calendar-active-bg:  $color-blue;
$calendar-active-text: $color-white;
$calendar-day-text: $color-text-med;

.swui-calendar {
  position: relative;
  font-size: .9rem;
  box-shadow: $shadow-3;
  background: $calendar-bg;
  display: inline-block;

  &:focus {
    outline: none;
  }

  .title-row {
    background: $calendar-title-bg;
    padding: .4rem .5rem;
    font-weight: 500;
    line-height: 1.8rem;
  }

  .day-name-row {
    color: $calendar-day-text;
    margin: .5rem;
    margin-bottom: 0;
  }

  .day-name,
  .day-cell {
    margin: .1rem .2rem;
    line-height: 1.8rem;
    text-align: center;
    width: 1.8rem;
    height: 1.8rem;
  }

  .day-container {
    margin: .5rem;
    margin-top: 0;

    .day {
      color: $calendar-active-text;
      height: 100%;
      width: 100%;
      max-height: 30px;
      max-width: 30px;
      line-height: 100%;
      border-radius: 50%;
      text-align: center;
      transition: background 200ms;

      &.prev-month,
      &.next-month {
        color: $calendar-day-text;
      }

      &.today {
        background: $calendar-today-bg;
      }

      &.active {
        background: $calendar-active-bg;
      }

      &:hover:not(.active) {
        &:hover:not([disabled]) {
          background: $calendar-hover-bg;
        }
      }
    }
  }
}