/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-calendar__labels {
    margin-block-end: var(--jkl-unit-20);
  }
  .jkl-calendar__navigation {
    margin-bottom: var(--jkl-unit-20);
  }
  .jkl-calendar .jkl-button--calendar {
    aspect-ratio: 1;
    box-sizing: border-box;
    display: flex;
    place-items: center;
    place-content: center;
    padding: 0;
    border-radius: 50%;
    position: relative;
  }
  .jkl-calendar .jkl-button--calendar span {
    z-index: 2;
  }
  .jkl-calendar .jkl-button--calendar::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 4ch;
    aspect-ratio: 1;
    position: absolute;
    box-sizing: border-box;
  }
  .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)), .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)) * {
    cursor: pointer;
  }
  .jkl-calendar .jkl-button--calendar:has(.day:not(:disabled)):has(.day:not(:checked)):hover::after {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
  }
  .jkl-calendar .jkl-button--calendar:has(.day:disabled) {
    opacity: 0.5;
  }
  .jkl-calendar .jkl-button--calendar:has(.day:disabled), .jkl-calendar .jkl-button--calendar:has(.day:disabled) * {
    cursor: not-allowed;
  }
  .jkl-calendar .jkl-button--calendar:has(.day:checked) {
    color: var(--jkl-color-text-on-contrast);
  }
  .jkl-calendar .jkl-button--calendar:has(.day:checked)::after {
    background-color: var(--jkl-color-background-contrast);
  }
  .jkl-calendar .jkl-button--calendar:has(.day:focus-visible, .day:focus) {
    outline: 3px solid var(--jkl-color-border-strong);
  }
  .jkl-calendar .jkl-button--calendar .day {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
}