/* Work hours on the profile: the days and hours only matter while the switch is on. */
.notification-schedule:has(.switch__input:not(:checked)) .notification-schedule__hours {
  display: none;
}

.notification-schedule__days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
}

.notification-schedule__day {
  input {
    block-size: 0;
    inline-size: 0;
    opacity: 0;
    position: absolute;
  }

  span {
    align-items: center;
    block-size: 2.6em;
    border: 1px solid var(--color-border-darker);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85em;
    font-weight: 600;
    inline-size: 2.6em;
    justify-content: center;
    transition: 150ms ease;
  }

  input:checked + span {
    background-color: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-text-reversed);
  }

  input:focus-visible + span {
    box-shadow:
      0 0 0 2px var(--color-bg),
      0 0 0 4px var(--color-link);
  }
}

.notification-schedule__time {
  font-variant-numeric: tabular-nums;
  inline-size: auto;
}