$color-empty: #f5f5f5;
$color-weekend: #ddd;

.calendar {
  background-color: color("background");
  width: 21em;

  &__days {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: spacing(-2);

    &__day, &__date {
      width: 3em;
      text-align: center;
      @include set-font(0, "single", $transform: "uppercase");
    }

    &__day {
      display: inline-block;
      margin-bottom: spacing(-3);
    }

    &__date {
      color: color("foreground");
      height: 3em;

      &[disabled] {
        color: color("background-secondary");
      }

      &--weekend {
        background-color: color("theme-secondary");

        &[disabled] {
          color: color("foreground-secondary");
        }
      }

      &--empty {
        background-color: color("background-secondary");
        &[disabled] {
          color: color("interactive");
        }
      }

      &--selected {
        border: $width-border solid color("theme");
      }
    }
  }

  &__year-month, &__time {
    display: flex;
    align-items: baseline;
    .form__field {
      margin-right: spacing(-3);
    }

    .button {
      margin-left: auto;
    }
  }
}