@layer components {
  .dialog {
    background-color: var(--color-canvas);
    border: 1px solid var(--color-ink-light);
    border-radius: 0.5rem;
    color: var(--color-ink);
    margin: auto;
    max-inline-size: min(28rem, calc(100% - 2rem));
    padding: 0;
    width: 100%;

    &::backdrop {
      background-color: oklch(var(--lch-ink-darkest) / 0.45);
    }
  }

  .dialog--anchored {
    inset: unset;
    margin: 0;
    max-inline-size: none;
    padding: 0.4rem;
    position: fixed;
    width: max-content;

    &::backdrop {
      background-color: oklch(var(--lch-ink-darkest) / 0.12);
    }
  }

  .dialog__content {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
  }

  .dialog__title {
    font-size: var(--text-large);
    font-weight: 700;
    margin: 0;
  }

  .dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1rem;
  }

  .dialog__remove {
    margin: 0;
  }

  .shortlist_days {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
  }

  .shortlist_days > form {
    display: contents;
  }

  .shortlist_days__day {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-ink-light);
    border-radius: 0.35rem;
    color: var(--color-ink-darkest);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-small);
    font-weight: 600;
    inline-size: 2.6rem;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-transform: capitalize;

    &:hover {
      border-color: oklch(var(--lch-blue-dark));
      color: oklch(var(--lch-blue-darker));
    }
  }

  .shortlist_days__day--selected {
    background-color: oklch(var(--lch-blue-lighter));
    border-color: oklch(var(--lch-blue-darker));
    color: oklch(var(--lch-blue-darker));
  }

  .project_picker {
    --project-picker-item-block-size: 2.1rem;
    --project-picker-gap: 0.25rem;
    --project-picker-visible-count: 10;

    display: grid;
    gap: var(--project-picker-gap);
    max-block-size: min(
      calc(
        (var(--project-picker-item-block-size) * var(--project-picker-visible-count)) +
        (var(--project-picker-gap) * (var(--project-picker-visible-count) - 1))
      ),
      calc(100dvh - 2rem)
    );
    max-inline-size: min(20rem, calc(100vw - 2rem));
    min-inline-size: 12rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .project_picker > form {
    display: contents;
  }

  .project_picker__project {
    background-color: var(--color-canvas);
    border: 1px solid transparent;
    border-radius: 0.35rem;
    block-size: var(--project-picker-item-block-size);
    color: var(--color-ink-darkest);
    cursor: pointer;
    font-size: var(--text-small);
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    padding: 0 0.65rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      background-color: oklch(var(--lch-blue-lighter));
      border-color: oklch(var(--lch-blue-dark));
      color: oklch(var(--lch-blue-darker));
    }
  }

  .project_picker__empty {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    margin: 0;
    padding: 0.45rem 0.65rem;
  }
}