@import 'mixins/objects.grid';
@import 'mixins/components.buttons';

.c-calendar {
  @include grid;
  @include grid--wrap;
  @include grid--center;
  @include grid__cell--no-gutter;
  z-index: var(--z-over-control);
  max-width: 400px;
  padding: var(--spacing-medium);
  text-align: center;
  background-color: var(--color-background);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
}

.c-calendar__control,
.c-calendar__date {
  --button-color: var(--color-quiet);
  --button-background-color: transparent;

  @include button-color;
  display: inline;
  flex: 0 0 12%;
  max-width: 12%;
  margin: 1.1%;
  padding: 2.5% 0;
  font-size: var(--text-font-size-medium);
  border-radius: var(--border-radius);
  outline: 0;
  user-select: none;

  &:hover {
    border-color: var(--border-color);
  }
}

.c-calendar__control {
  --button-color: var(--color-default);
}

.c-calendar__header {
  @include grid__cell;
  @include grid__cell--no-gutter;
  @include grid__cell--width(71.5%);
  padding: var(--spacing-small) 0;
}

.c-calendar__day {
  @include grid__cell;
  @include grid__cell--no-gutter;
  flex: 0 0 12%;
  max-width: 12%;
  margin: 1.1%;
  padding: var(--spacing-small) 0;
  font-weight: var(--text-font-weight-heavy);
}

.c-calendar__date--in-month {
  --button-color: #000;
}

.c-calendar__date[aria-current='date'] {
  border-color: var(--border-color);
}

.c-calendar__date--selected[aria-selected='true'],
.c-calendar__date--selected[aria-selected='true']:hover {
  --button-color: #fff;

  @include button-color;

  border-color: transparent;
}

.c-calendar__footer {
  width: 100%;
  padding-top: var(--spacing-large);
}