/**
  ui-calendar - Main Element
  ui-calendar__month-header - The element that contains the month and arrows
  ui-calendar__prev - Previous Button
  ui-calendar__next - Next Button
  ui-calendar__sheet - The div containing the calendar table
  ui-calendar__week - Most tr elements within the calendar
  ui-calendar__day - Most td elements within the calendar
  ui-calendar__day--weekend - If a day falls on the weekend or not
  ui-calendar__day--today - If a day is the same as today
  ui-calendar__day--different-month - If a day is not in the current month
  ui-calendar__day--selected - If a day is selected
  ui-calendar__bubble - The visual bubble when selecting a date
*/

$calendar-day-size: 44px;
$calendar-day-border-size: 2px;
$calendar-ease: $ui-duration-fast linear;

.ui-calendar {
  min-width: 298px;

  border: 1px solid ui-color('paper-darkest');

  &__prev,
  &__next {
    transition: color $calendar-ease;

    &:hover {
      color: ui-color('orange-darkest');
    }
  }

  &__sheet {
    width: 100%;

    border-collapse: collapse;
  }

  &__month-header {
    border-bottom: 1px solid ui-color('paper-darkest');
  }

  &__day {
    width: 100%;
    padding: 0;

    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;

    background: none;
    border: 0;
    cursor: pointer;

    &--different-month {
      opacity: 0;

      pointer-events: none;
    }

    &--weekend {
      /* Insert optional weekend styles here */
    }

    &--today {
      color: ui-color('orange-darkest');
    }

    &--inactive {
      opacity: 0.25;

      pointer-events: none;
    }
  }

  &__bubble {
    position: relative;

    width: $calendar-day-size - 8;
    height: $calendar-day-size - 8;
    margin: 5px 0;

    line-height: $calendar-day-size - $calendar-day-border-size - 8;

    border: $calendar-day-border-size solid transparent;
    border-radius: 100%;

    transition: background $calendar-ease, color $calendar-ease,
      border-color $calendar-ease;

    @include ui-from($ui-bp-tablet) {
      width: $calendar-day-size;
      height: $calendar-day-size;

      line-height: $calendar-day-size - $calendar-day-border-size;
    }

    &::after {
      @include ui-icon--checkmark;
      position: absolute;
      top: -3px;
      right: -3px;

      display: inline-block;
      width: 15px;
      height: 15px;

      color: ui-color('charcoal-ink-lightest');
      font-size: $ui-icon-dogear-size;
      line-height: 1rem;

      background: ui-color('orange-darkest');
      border-radius: 100%;
      opacity: 0;

      transition: opacity $calendar-ease;
    }
  }

  &__week:last-child &__bubble {
    margin-bottom: 0;
  }

  &__day:hover &__bubble {
    color: ui-color('charcoal-ink-lightest');

    background: ui-color('orange-darkest');
  }

  &__day--selected &__bubble,
  &__day--selected:hover &__bubble {
    color: ui-color('orange-darkest');

    background: ui-color('charcoal-ink-lightest');
    border-color: ui-color('orange-darkest');

    &::after {
      opacity: 1;
    }
  }
}