calendar {
  color: var(--view-fg-color);
  background-clip: padding-box;
  border: 1px solid $border_color;
  font-variant-numeric: tabular-nums;

  &.view:disabled {
    color: var(--view-fg-color);
  }

  > header {
    border-bottom: 1px solid $border_color;

    > button {
      @extend %button_basic_flat;
      border-radius: 0;
    }
  }

  > grid {
    padding-left: 3px;
    padding-bottom: 3px;

    > label.today {
      box-shadow: inset 0px -2px $border_color;

      &:selected {
        box-shadow: none;
      }
    }

    > label {
      @include focus-ring($focus-state: ':focus');
      margin-top: 3px;
      margin-right: 3px;

      &.day-number {
        padding: 3px;

        &:checked {
          border-radius: $button_radius;
          background-color: color-mix(in srgb, var(--accent-bg-color) 30%, transparent);
        }

        &:selected {
          border-radius: $button_radius;

          background-color: var(--accent-bg-color);
          color: var(--accent-fg-color);
        }
      }

      &.day-number.other-month {
        color: color-mix(in srgb, currentColor 30%, transparent);
      }
    }
  }
}
