.calendar {
  border-radius: border-radius(1);
  border: $border;
  padding: spacer(4);

  .react-calendar__navigation {
    display: flex;
  }

  .react-calendar__navigation__label {
    flex-grow: 1;
    text-align: center;
    font-weight: bold;

    &:disabled {
      opacity: 1;
    }
  }

  .react-calendar__navigation__arrow {
    @include font-size(1);
  }

  .react-calendar__viewContainer {
    text-align: center;
  }

  .react-calendar__month-view__weekdays {
    font-weight: bold;
    padding-top: spacer(2);
    padding-bottom: spacer(2);

    abbr {
      text-decoration: none;
      @include font-size(1);
    }
  }

  .react-calendar__month-view__days {
    border-radius: border-radius(2);
    border: $border;

    overflow: hidden;
  }

  .react-calendar__month-view__days__day {
    padding-top: spacer(2);
    padding-bottom: spacer(2);
    position: relative;

    &:disabled {
      opacity: 1;

      abbr {
        opacity: 0.3;
      }
    }

    &::before,
    &::after {
      content: "";
      position: absolute;
    }

    &:nth-child(n + 8)::before {
      border-top: $border;
      top: 0;
      left: 0;
      width: 100%;
    }

    &:not(:nth-child(7n))::after {
      border-right: $border;
      top: 0;
      right: 0;
      height: 100%;
    }
  }

  .react-calendar__month-view__days__day--neighboringMonth {
    abbr {
      visibility: hidden;
    }

    &.react-calendar__tile--active {
      background-color: inherit;
    }
  }

  .react-calendar__tile--active {
    @include bg-color(accent);
  }
}
