.icon {
    fill: currentColor;
}

.heading {
    margin: 0;
    font-weight: var(--text-weight-bold);
}

h1.heading {
    font-size: var(--text-size-xl);
}
h2.heading {
    font-size: var(--text-size-lg);
}
h3.heading {
    font-size: var(--text-size-md);
}
h4.heading {
    font-size: var(--text-size-sm);
}
h5.heading {
    font-size: var(--text-size-xs);
}
h6.heading {
    font-size: var(--text-size-xs);
}

.button {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_surface-color-disabled: var(--surface-color-disabled);
    --_border-color: var(--border-color);
    --_outline-color: var(--border-color-active);
    --_text-color: var(--text-color);
    --_text-color-on-disabled: var(--text-color-on-disabled);


    &.button--secondary {
        --_surface-color: var(--surface-color-secondary);
        --_surface-color-hover: var(--surface-color-secondary-hover);
        --_surface-color-disabled: var(--surface-color-secondary-disabled);
        --_text-color: var(--text-color-on-secondary);
        --_border-color: var(--border-color-secondary);
    }
    &.button--accent {
        --_surface-color: var(--surface-color-accent);
        --_surface-color-hover: var(--surface-color-accent-hover);
        --_surface-color-disabled: var(--surface-color-secondary-disabled);
        --_text-color: var(--text-color-on-accent);
        --_border-color: var(--border-color-accent);
    }

    appearance: none;

    display: flex;
    align-items: center;
    gap: 0 var(--component-md-gap);
    width: fit-content;

    cursor: pointer;

    line-height: normal;

    padding-inline: var(--component-md-inline);
    padding-block: var(--component-md-block);

    border: var(--border-width) solid var(--_border-color);
    border-radius: var(--component-md-radius);

    color: var(--_text-color);
    font-weight: var(--text-weight-bold);
    background-color: var(--_surface-color);

    transition: background-color var(--animation);

    &[data-hovered] {
        background-color: var(--_surface-color-hover);
    }

    &[data-pressed] {}

    &[data-focused] {}

    &[data-focus-visible] {
        outline-offset: calc(var(--border-width) * -1);
        outline-width: var(--border-width-x);
        outline-style: solid;
        outline-color: var(--_outline-color);
    }

    &[data-disabled] {
        --_surface-color: var(--_surface-color-disabled);
        --_text-color: var(--_text-color-on-disabled);
        cursor: not-allowed;
    }

    &[data-pending] {}

    .button__content {
        flex-grow: 1;
        text-align: start;

        display: flex;
        flex-direction: row;
    }

    .button__icon {
        display: flex;
    }

    svg {
        width: var(--text-size-md);
        height: auto;
        fill: var(--_text-color);
    }

}

.invisible-button {
    appearance: none;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    width: fit-content;
    cursor: pointer;

    text-align: inherit;
}

.popover-button {
    --_surface-color-hover: var(--surface-color-hover);

    appearance: none;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: var(--container-sm-block) var(--container-sm-inline);
    border-radius: var(--container-sm-radius);
    cursor: pointer;
    width: 100%;

    text-align: start;

    &[data-hovered] {
        background-color: var(--_surface-color-hover);
    }
}

.button-kebab {
    appearance: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0 var(--component-md-gap);

    cursor: pointer;
    padding: 0;
    margin: 0;

    border: none;
    background-color: transparent;

    height: var(--icon-size-xl);
    width: var(--icon-size-xl);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--component-md-gap) 0;

    .checkbox-group__required {
        display: inline-block;
        padding-inline: var(--space-xs);
        font-weight: var(--text-weight-bold);
        color: var(--text-color-error);
    }

    .checkbox-group__items {
        display: flex;
        flex-direction: column;
        gap: var(--component-md-gap) 0;
        align-items: flex-start;
    }
}

.checkbox {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_surface-color-disabled: var(--surface-color-disabled);
    --_border-color: var(--border-color);
    --_outline-color: var(--border-color-active);
    --_text-color: var(--text-color);
    --_text-color-on-disabled: var(--text-color-on-disabled);
    --_cursor: pointer;

    --_square: var(--text-size-lg);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--component-md-gap);
    cursor: var(--_cursor);

    &[data-selected] {
        --_surface-color: var(--surface-color-secondary);
        --_surface-color-hover: var(--surface-color-secondary-hover);
        --_surface-color-disabled: var(--surface-color-secondary-disabled);
        --_text-color: var(--text-color-on-secondary);
        --_border-color: var(--border-color-secondary);
    }

    &[data-disabled] {
        --_surface-color: var(--_surface-color-disabled);
        --_text-color: var(--_text-color-on-disabled);
        --_cursor: not-allowed;
    }

    &[data-hovered] .checkbox_indicator {
        --_surface-color: var(--_surface-color-hover);
    }

    &[data-focus-visible] .checkbox_indicator {
        outline-offset: calc(var(--border-width) * -1);
        outline-width: var(--border-width-x);
        outline-style: solid;
        outline-color: var(--_outline-color);
    }

    .checkbox_indicator {
        display: flex;
        align-items: center;
        justify-content: center;

        width: var(--_square);
        height: var(--_square);

        background-color: var(--_surface-color);

        border: var(--border-width) solid var(--_border-color);
        border-radius: var(--component-md-radius);

        transition: background-color var(--animation);

        svg {
            width: var(--icon-size-md);
            height: auto;
            fill: var(--_text-color);
        }
    }
}

.field-description {
    font-weight: var(--text-weight-medium);
    font-size: var(--text-size-sm);
    color: var(--text-color-description);
}

.field-label {
    font-weight: var(--text-weight-bold);
    font-size: var(--text-size-sm);
}

.field-error {
    font-weight: var(--text-weight-medium);
    font-size: var(--text-size-sm);
    color: var(--text-color-error);

    &.field-error--block {
        display: block;
        padding-block: var(--container-lg-gap);
    }
}

.input {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_surface-color-disabled: var(--surface-color-disabled);
    --_border-color: var(--border-color);
    --_outline-color: var(--border-color-active);
    --_text-color: var(--text-color);
    --_text-color-on-disabled: var(--text-color-on-disabled);
    --_padding-inline: var(--component-md-inline);

    display: flex;
    gap: var(--component-md-gap);
    align-items: center;
    background-color: var(--_surface-color);
    border: var(--border-width) solid var(--_border-color);
    border-radius: var(--component-md-radius);

    padding-inline: var(--_padding-inline);

    &:has(textarea) {
        --_padding-inline: 0;
    }

    &:has(input:focus-visible) {
        outline-offset: calc(var(--border-width) * -1);
        outline-width: var(--border-width-x);
        outline-style: solid;
        outline-color: var(--_outline-color);
    }

    &:has([data-disabled]) {
        --_surface-color: var(--surface-color-disabled);
        --_text-color: var(--text-color-on-disabled);
    }

    &:has([data-invalid]) {
        --_border-color: var(--border-color-error);
    }

    input::-webkit-datetime-edit,
    input::-webkit-datetime-edit-fields-wrapper,
    input::-webkit-datetime-edit-year-field,
    input::-webkit-datetime-edit-month-field,
    input::-webkit-datetime-edit-day-field,
    input::-webkit-datetime-edit-hour-field,
    input::-webkit-datetime-edit-minute-field,
    input::-webkit-datetime-edit-second-field,
    input::-webkit-datetime-edit-millisecond-field,
    input::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }

    input, textarea {
        appearance: none;
        border: none;
        font-family: inherit;
        font-size: inherit;
        color: currentColor;
        background-color: transparent;

        border-radius: var(--component-md-radius);

        padding-inline: 0;
        padding-block: var(--component-md-block);

        width: 100%;

        outline: none;
        line-height: normal;
    }
    textarea {
        padding-inline: var(--component-md-inline);
    }
    .input__icon {
        flex-shrink: 0;

        svg {
            width: var(--icon-size-md);
            height: auto;
            fill: var(--_text-color);
        }
    }
}

.react-aria-ListBox {
    max-height: inherit;
    overflow: auto;
    border: 0.5px solid var(--border-color);
    border-radius: calc(var(--radius) + var(--spacing-1));
    background: var(--overlay-background);
    forced-color-adjust: none;
    outline: none;
    box-sizing: border-box;
    font: var(--font-size) system-ui;
    color: var(--text-color);

    &:has(.react-aria-ListBoxSection) {
        scroll-padding: 24px;
    }

    &[data-focus-visible] {
        outline: 2px solid var(--focus-ring-color);
        outline-offset: -1px;
    }

    &[data-empty] {
        align-items: center;
        justify-content: center;
        font-style: italic;
    }

    &[data-drop-target] {
        outline: 2px solid var(--highlight-background);
        outline-offset: -1px;
        background: var(--highlight-overlay)
    }

    .react-aria-DropIndicator[data-drop-target] {
        z-index: 3;
        outline: 1px solid var(--highlight-background);
    }
}

.react-aria-ListBoxSection {
    .react-aria-Header {
        position: sticky;
        top: -0.5px;
        z-index: 2;
        font-size: var(--font-size-sm);
        font-weight: 600;
        font-variation-settings: initial;
        padding: var(--spacing-1) var(--spacing-4);
        background: var(--gray-100);
        border-block: 0.5px solid var(--gray-400);
        cursor: default;
        user-select: none;
        box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);

        @media (prefers-color-scheme: dark) {
            box-shadow: inset 0px 4px 8px var(--gray-200);
        }
    }

    &:first-child .react-aria-Header {
        margin-top: -0.5px;
    }
}

.react-aria-ListBoxItem {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius);
    outline: none;
    cursor: default;
    color: var(--text-color);
    font: var(--font-size) system-ui;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--spacing-8);
    box-sizing: border-box;
    position: relative;
    transition-property: background, color, border-radius;
    transition-duration: 200ms;
    -webkit-tap-highlight-color: transparent;

    --border-color: var(--gray-300);

    &:not(:last-child)::after {
        content: '';
        display: block;
        position: absolute;
    }

    &[data-pressed] {
        background: var(--highlight-hover);
        border-radius: var(--radius);
    }

    &[data-focus-visible] {
        outline: 2px solid var(--focus-ring-color);
        outline-offset: -2px;
        z-index: 2;
    }

    &[data-selected] {
        background: var(--highlight-background);
        color: var(--highlight-foreground);
        --border-color: transparent;

        &[data-focus-visible] {
            outline-color: var(--highlight-foreground);
            outline-offset: -4px;
        }

        &[data-pressed] {
            background: var(--highlight-background-pressed);
        }

        &:has(+ [data-selected]),
        &:has(+ .react-aria-DropIndicator + [data-selected]) {
            --border-color: rgb(255 255 255 / 0.3);
        }
    }

    [slot=label] {
        font-weight: 500;
    }

    [slot=description] {
        font-size: var(--font-size-sm);
    }

    &[href] {
        text-decoration: none;
        cursor: pointer;
        -webkit-touch-callout: none;
    }

    &[data-disabled] {
        color: var(--text-color-disabled);
    }

    &[data-dragging] {
        opacity: 0.6;
    }

    &[data-drop-target] {
        outline: 2px solid var(--highlight-background);
        background: var(--highlight-overlay)
    }
}

.react-aria-ListBox {
    &[data-layout=stack] {
        display: flex;

        &[data-orientation=vertical] {
            flex-direction: column;
            width: 250px;
            max-height: 300px;
            min-height: 100px;

            .react-aria-ListBoxItem {
                margin-inline: var(--spacing-1);

                &:where(:nth-child(1 of .react-aria-ListBoxItem)) {
                    margin-top: var(--spacing);
                }

                &:where(:nth-last-child(1 of .react-aria-ListBoxItem)) {
                    margin-bottom: var(--spacing);
                }

                [role=presentation]>& {
                    margin: 0;
                    /* virtualizer */
                }

                &:not(:last-child)::after {
                    bottom: 0;
                    width: calc(100% - var(--spacing-6));
                    border-bottom: 0.5px solid var(--border-color);
                }

                &[data-selected] {

                    &:has(+ [data-selected]),
                    &:has(+ .react-aria-DropIndicator + [data-selected]) {
                        border-end-start-radius: 0;
                        border-end-end-radius: 0;
                    }

                    +[data-selected],
                    +.react-aria-DropIndicator+[data-selected] {
                        border-start-start-radius: 0;
                        border-start-end-radius: 0;
                    }
                }
            }
        }

        &[data-orientation=horizontal] {
            flex-direction: row;
            width: 100%;

            .react-aria-ListBoxItem {
                min-width: max-content;
                margin-block: var(--spacing-1);

                &:nth-child(1 of .react-aria-ListBoxItem) {
                    margin-inline-start: var(--spacing);
                }

                &:nth-last-child(1 of .react-aria-ListBoxItem) {
                    margin-inline-end: var(--spacing);
                }

                &:not(:last-child)::after {
                    inset-inline-end: 0;
                    height: calc(100% - var(--spacing-2));
                    border-inline-end: 0.5px solid var(--border-color);
                }

                &[data-selected] {

                    &:has(+ [data-selected]),
                    &:has(+ .react-aria-DropIndicator + [data-selected]) {
                        border-start-end-radius: 0;
                        border-end-end-radius: 0;
                    }

                    +[data-selected],
                    +.react-aria-DropIndicator+[data-selected] {
                        border-start-start-radius: 0;
                        border-end-start-radius: 0;
                    }
                }
            }
        }
    }

    &[data-layout=grid] {
        display: grid;
        gap: var(--spacing-1);
        width: fit-content;
        max-width: 100%;
        padding: var(--spacing-1);

        &[data-orientation=vertical] {
            grid-template-columns: 1fr 1fr;
        }

        &[data-orientation=horizontal] {
            grid-auto-flow: column;
            grid-template-rows: auto auto;
            grid-template-columns: none;
            grid-auto-columns: 160px;
        }
    }
}

.react-aria-ListBoxLoadingIndicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 100%;
}

.dropdown-listbox {
    display: block;
    max-height: inherit;
    overflow: auto;
    border-radius: inherit;
    forced-color-adjust: none;
    outline: none;
    box-sizing: border-box;

    padding: var(--component-md-block) var(--component-md-inline);

    &[data-empty] { /* FIXME: find sizes for these values*/
        min-height: var(--spacing-8);
        padding: var(--spacing-2);
    }

    .react-aria-Header {
        padding-left: var(--spacing-7);
    }
}

.dropdown-item {
    /* padding: calc((var(--spacing-8) - 1lh) / 2) var(--spacing-3) calc((var(--spacing-8) - 1lh) / 2) var(--spacing-6); */
    padding: var(--component-md-block) var(--component-md-inline);
    box-sizing: border-box;
    border-radius: var(--radius);
    outline: none;
    cursor: default;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-height: var(--spacing-8);
    margin-inline: var(--spacing-1);
    -webkit-tap-highlight-color: transparent;

    &:first-of-type {
        margin-top: var(--spacing);
    }

    &:last-of-type {
        margin-bottom: var(--spacing);
    }

    &[data-selected] {
        /* font-weight: 500; */
        /* color: var(--text-color); */

        svg {
            width: var(--icon-size-md);
            height: auto;
            fill: var(--_text-color);
        }

        /* .lucide-check {
            position: absolute;
            top: 50%;
            left: var(--spacing-1);
            translate: 0 -50%;
            stroke-width: 3px;
            width: var(--spacing-4);
            height: var(--spacing-4);
        } */
    }

    &[data-pressed] {
        background: var(--highlight-hover);
    }

    &[data-focused] {
        background: var(--highlight-background);
        color: var(--highlight-foreground);
    }

    [slot=label] {
        /* font-weight: 500; */
    }

    [slot=description] {
        font-size: var(--font-size-sm);
    }

    &[data-disabled] {
        color: var(--text-color-disabled);
    }

    &[href] {
        text-decoration: none;
        cursor: pointer;
    }
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--component-md-gap) 0;

    .radio-group__required {
        display: inline-block;
        padding-inline: var(--space-xs);
        font-weight: var(--text-weight-bold);
        color: var(--text-color-error);
    }

    .radio-group__items {
        display: flex;
        flex-direction: column;
        gap: var(--component-md-gap) 0;
    }
}

.radio {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_surface-color-disabled: var(--surface-color-disabled);
    --_border-color: var(--border-color);
    --_outline-color: var(--border-color-active);
    --_text-color: var(--text-color);
    --_text-color-on-disabled: var(--text-color-on-disabled);

    --_square: var(--text-size-lg);

    display: flex;
    /* This is needed so the HiddenInput is positioned correctly */
    position: relative;
    align-items: center;
    gap: var(--component-md-gap);
    forced-color-adjust: none;

    transition: background-color var(--animation);

    &[data-selected] {
        --_surface-color: var(--surface-color-secondary);
        --_border-color: var(--border-color-secondary);

        &[data-hovered] .radio__indicator {
            --_surface-color: var(--surface-color-secondary);
        }
        .radio__indicator::after {
            background-color: var(--surface-color);
            scale: 1;
        }
    }
    &[data-disabled] {
        --_surface-color: var(--_surface-color-disabled);
        --_text-color: var(--_text-color-on-disabled);
        --_border-color: var(--border-color-disabled);
        cursor: not-allowed;
    }
    &[data-hovered] .radio__indicator {
        --_surface-color: var(--surface-color-hover);
    }

    .radio__indicator {
        position: relative;
        width: var(--_square);
        height: var(--_square);
        box-sizing: border-box;
        border-radius: 50%;
        border: var(--border-width) solid var(--_border-color);
        background-color: var(--_surface-color);
        cursor: pointer;

        transition: all var(--animation);

        &::after {
            content: '';
            position: absolute;
            inset: 4px; /* TODO: somewhat random */
            border-radius: inherit;
            background: transparent;
            transition: scale var(--animation);
            scale: 0;
        }
    }
}


.popover {
    --_surface-color: var(--surface-color);
    --_border-color: var(--border-color);
    --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.12);

    border-radius: var(--component-md-radius);
    border: var(--border-width) solid var(--_border-color);

    background-color: var(--_surface-color);
    filter: drop-shadow(var(--popover-shadow));

}

.react-aria-Popover {
  --background-color: var(--overlay-background);

  outline: 1px solid var(--overlay-border);
  box-sizing: border-box;
  filter: drop-shadow(var(--popover-shadow));
  border-radius: var(--radius-lg);
  background: var(--background-color);
  color: var(--text-color);
  transition: transform 200ms, opacity 200ms;
  font: var(--font-size) system-ui;
  padding: 8px;

  &[data-trigger=MenuTrigger],
  &[data-trigger=SubmenuTrigger] {
    padding: 0;
  }

  .react-aria-OverlayArrow svg {
    display: block;
    fill: var(--background-color);
    stroke: var(--overlay-border);
    paint-order: stroke;
    stroke-width: 2px;
  }

  &[data-entering],
  &[data-exiting] {
    transform: var(--origin);
    opacity: 0;
  }

  &[data-placement=top] {
    --origin: translateY(8px);

    &:has(.react-aria-OverlayArrow) {
      margin-bottom: 6px;
    }
  }

  &[data-placement=bottom] {
    --origin: translateY(-8px);

    &:has(.react-aria-OverlayArrow) {
      margin-top: 6px;
    }

    .react-aria-OverlayArrow svg {
      transform: rotate(180deg);
    }
  }

  &[data-placement=right] {
    --origin: translateX(-8px);

    &:has(.react-aria-OverlayArrow) {
      margin-left: 6px;
    }

    .react-aria-OverlayArrow svg {
      transform: rotate(90deg);
    }
  }

  &[data-placement=left] {
    --origin: translateX(8px);

    &:has(.react-aria-OverlayArrow) {
      margin-right: 6px;
    }

    .react-aria-OverlayArrow svg {
      transform: rotate(-90deg);
    }
  }
}

.select {
    display: flex;
    flex-direction: column;
    gap: var(--component-md-gap);

    color: var(--text-color);
    position: relative;


    .select__select-value {
        flex: 1;
        text-align: start;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &[data-placeholder] {
            color: var(--text-color-placeholder);
            font-weight: normal;
        }
        [slot=description] {
            display: none;
        }
    }

    &[data-focus-visible] {
        outline: none;
    }
}
.select__list-box {
    padding: var(--component-md-inline);

    .select__item {
        --_surface-color: transparent;

        display: flex;
        padding: var(--component-md-block) var(--component-md-inline);
        border-radius: var(--component-md-radius);
        background-color: var(--_surface-color);

        transition: background-color var(--animation);

        &[data-hovered] {
            --_surface-color: var(--surface-color-hover);
            outline: none;
        }
        &[data-focus-visible] {
            --_surface-color: var(--surface-color-hover);
            outline: none;
        }

        [slot=label] {
            flex-grow: 1;
        }

        svg {
            width: var(--icon-size-md);
            height: auto;
            fill: var(--_text-color);
        }
    }
}

.select-popover[data-trigger=Select] {
    width: var(--trigger-width);
    padding: 0;
}

.switch {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_border-color: var(--border-color);
    --_track-surface-color: var(--surface-color);
    --_track-surface-color-disabled: var(--surface-color-disabled);
    --_handle-surface-color: var(--surface-color-secondary);
    --_handle-color-on-disabled: var(--text-color-on-disabled);
    --_outline-color: var(--border-color-active);

    --_square: var(--text-size-lg);

    display: flex;
    /* This is needed so the HiddenInput is positioned correctly */
    position: relative;
    align-items: center;
    gap: var(--component-md-gap);
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;

    .track {
        width: calc(var(--_square) * 2);
        height: var(--_square);

        border: var(--border-width) solid var(--_border-color);
        border-radius: var(--_square);
        background-color: var(--_track-surface-color);

        scale: 1;
        cursor: pointer;

        transition: background-color var(--animation);

        .handle {
            display: block;
            height: 100%;
            aspect-ratio: 1;
            border-radius: var(--_square);
            background-color: var(--_handle-surface-color);
            transition: all var(--animation);
            transform-origin: 0 50%;
            scale: 0.8;
            transform-origin: center;
            will-change: transform;
        }
    }

    &[data-hovered] {
        .track {
            --_track-surface-color: var(--_surface-color-hover);
        }
        &[data-selected] .track {
            --_track-surface-color: var(--surface-color-secondary);
        }
    }

    &[data-selected] {
        --_handle-surface-color: var(--surface-color);
        --_track-surface-color: var(--surface-color-secondary);
        --_border-color: var(--surface-color-secondary);

        .handle {
            transform: translateX(var(--_square));
        }
    }

    &[data-focus-visible] .track {
        outline-offset: calc(var(--border-width) -1);
        outline-width: var(--border-width-x);
        outline-style: solid;
        outline-color: var(--_outline-color);
    }

    &[data-disabled] {
        --_track-surface-color: var(--_track-surface-color-disabled);
        --_handle-surface-color: var(--_handle-color-on-disabled);
        --_border-color: var(--_handle-color-on-disabled);

        .track {
            cursor: not-allowed;
        }
    }
}

.text-field {
    display: flex;
    flex-direction: column;
    gap: var(--component-md-gap) 0;

    .text-field__required {
        display: inline-block;
        padding-inline: .5ch;
        font-weight: var(--text-weight-bold);
        color: var(--text-color-error);
    }
}


.toggle-button {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_surface-color-disabled: var(--surface-color-disabled);
    --_border-color: var(--border-color);
    --_border-radius: var(--component-md-radius);
    --_outline-color: var(--border-color-active);
    --_text-color: var(--text-color);
    --_text-color-on-disabled: var(--text-color-on-disabled);


    &.button--secondary {
        --_surface-color: var(--surface-color-secondary);
        --_surface-color-hover: var(--surface-color-secondary-hover);
        --_surface-color-disabled: var(--surface-color-secondary-disabled);
        --_text-color: var(--text-color-on-secondary);
        --_border-color: var(--border-color-secondary);
    }

    appearance: none;

    display: flex;
    align-items: center;
    gap: 0 var(--component-md-gap);

    cursor: pointer;

    line-height: normal;

    padding-inline: var(--component-md-inline);
    padding-block: var(--component-md-block);

    border: var(--border-width) solid var(--_border-color);
    border-radius: var(--_border-radius);

    color: var(--_text-color);
    font-weight: var(--text-weight-bold);
    background-color: var(--_surface-color);

    transition: background-color var(--animation);

        &[data-hovered] {
        background-color: var(--_surface-color-hover);
    }

    &[data-pressed] {}

    &[data-focused] {}

    &[data-selected] {
        --_surface-color: var(--surface-color-hightlight);
    }

    &[data-focus-visible] {
        outline-offset: calc(var(--border-width) * -1);
        outline-width: var(--border-width-x);
        outline-style: solid;
        outline-color: var(--_outline-color);
    }

    &[data-disabled] {
        --_surface-color: var(--_surface-color-disabled);
        --_text-color: var(--_text-color-on-disabled);
        cursor: not-allowed;
    }

    svg {
        height: var(--icon-size-md);
        width: auto;
    }

    /* border: none;
    forced-color-adjust: none;
    border-radius: var(--radius);
    appearance: none;
    vertical-align: middle;
    font: var(--font-size) system-ui;
    font-weight: 500;
    text-align: center;
    margin: 0;
    height: var(--spacing-8);
    padding: 0 var(--spacing-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: background, box-shadow, text-shadow, scale;
    transition-duration: 200ms;
    -webkit-tap-highlight-color: transparent;

    >span {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    >span>svg {
        width: var(--spacing-4);
        height: var(--spacing-4);
    }

    &:has(> span > svg:only-child) {
        width: var(--spacing-8);
        padding: 0;
        border-radius: 9999px;
    }

    &[data-pressed] {
        scale: 0.95;
    } */
}


.toggle-button-group {
    display: flex;

    >.react-aria-ToggleButton {
        z-index: 1;

        >span {
            transition: scale 200ms;
        }

        &[data-pressed] {
            scale: 1;

            >span {
                scale: 0.9;
            }
        }

        &[data-disabled] {
            z-index: 0;
        }

        &[data-selected],
        &[data-focus-visible] {
            z-index: 2;
        }
    }
}

.toggle-button-group[data-orientation=horizontal] {
    flex-direction: row;

    >.toggle-button {
        margin-inline-start: calc(var(--border-width) * -1);
        border-radius: 0;

        &:first-child {
            border-radius: var(--_border-radius) 0 0 var(--_border-radius);
            margin-inline-start: 0;
        }

        &:last-child {
            border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
        }
    }
}

.toggle-button-group[data-orientation=vertical] {
    flex-direction: column;
    width: fit-content;

    >.react-aria-ToggleButton {
        margin-block-start: -1px;
        border-radius: 0;

        &:first-child {
            border-radius: var(--_border-radius) var(--_border-radius) 0 0;
            margin-block-start: 0;
        }

        &:last-child {
            border-radius: 0 0 var(--_border-radius) var(--_border-radius);
        }
    }
}

.number-field {
        display: flex;
    flex-direction: column;
    gap: var(--component-md-gap) 0;

    .number-field__button-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--component-md-gap);

        svg{
            height: var(--icon-size-md);
            width: auto;
        }
    }
    .number-field__button {
        margin: 0;
        padding: 0;
        appearance: inherit;
        border: 0;
        background: none;
        line-height: 1;
        cursor: pointer;
    }

    .number-field__required {
        display: inline-block;
        padding-inline: .5ch;
        font-weight: var(--text-weight-bold);
        color: var(--text-color-error);
    }
}



.number-field__group {
    --_surface-color: var(--surface-color);
    --_surface-color-hover: var(--surface-color-hover);
    --_surface-color-disabled: var(--surface-color-disabled);
    --_border-color: var(--border-color);
    --_outline-color: var(--border-color-active);
    --_text-color: var(--text-color);
    --_text-color-on-disabled: var(--text-color-on-disabled);

    display: flex;
    gap: var(--component-md-gap);
    align-items: center;
    background-color: var(--_surface-color);
    border: var(--border-width) solid var(--_border-color);
    border-radius: var(--component-md-radius);

    padding-inline: var(--component-md-inline);

    &:has(input:focus-visible) {
        outline-offset: calc(var(--border-width) * -1);
        outline-width: var(--border-width-x);
        outline-style: solid;
        outline-color: var(--_outline-color);
    }

    &:has(input[data-disabled="true"]) {
        --_surface-color: var(--surface-color-disabled);
        --_text-color: var(--text-color-on-disabled);
    }

    &:has([data-invalid]) {
        --_border-color: var(--border-color-error);
    }

    input, textarea {
        appearance: none;
        border: none;
        font-family: inherit;
        font-size: inherit;
        color: currentColor;
        background-color: transparent;

        border-radius: var(--component-md-radius);

        padding-inline: 0;
        padding-block: var(--component-md-block);

        width: 100%;

        outline: none;
    }

    .number-field__icon {
        flex-shrink: 0;

        svg {
            width: var(--icon-size-md);
            height: auto;
            fill: var(--_text-color);
        }
    }
}

.anonymous-page {

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
}

.anonymous-page__form {
    background-color: var(--surface-color);
    border: var(--border-width) solid var(--border-color-separator);
    margin-block: var(--container-lg-block);
    padding: var(--container-lg-block);
    border-radius: var(--container-lg-radius);
    box-shadow: var(--shadow);
    box-shadow: 0 0 12px -8px rgb(from var(--surface-color-secondary) r g b /.5);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--container-md-gap);
}


.anonymous-page__disclaimer {
    font-size: var(--text-size-sm);
    color: var(--text-color-description);
}

.main-menu {
    --_container-padding: var(--container-xl-block);
    --_container-gap: var(--space-xxl);
    --_title-weight: var(--text-weight-dark);
    --_title-size: var(--text-size-xs);
    --_title-color: var(--text-color-description);
    --_title-padding: var(--component-sm-block) var(--component-sm-inline);

    display: flex;
    list-style: none;
    margin: 0;
    padding: var(--_container-padding);
    flex-direction: column;
    gap: var(--_container-gap) 0;

    .main-menu__title {
        display: block;
        text-transform: uppercase;
        font-weight: var(--_title-weight);
        font-size: var(--_title-size);
        color: var(--_title-color);

        padding: var(--_title-padding);
    }

    .main-menu__items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .main-menu__link {
        --_link-surface-color: transparent;
        --_link-surface-color-hover: var(--surface-color-hover);
        --_link-surface-color-active: var(--surface-color-secondary);
        --_link-text-color: currentColor;
        --_link-text-color-on-active: var(--text-color-on-secondary);
        --_link-text-weight: var(--text-weight-bold);
        --_link-radius: var(--component-md-radius);
        --_link-padding: var(--component-md-block) var(--component-md-inline);

        display: block;
        background-color: var(--_link-surface-color);
        border-radius: var(--_link-radius);
        padding: var(--_link-padding);

        color: var(--_link-text-color);
        text-decoration: none;
        font-weight: var(--_link-text-weight);

        transition:
            background-color var(--animation),
            color var(--animation);

        &.main-menu__link--active {
            --_link-surface-color: var(--_link-surface-color-active);
            --_link-text-color: var(--_link-text-color-on-active);
        }

        &.main-menu__link--active:hover {
            --_link-surface-color: var(--_link-surface-color-active);
        }

        &:hover {
            --_link-surface-color: var(--_link-surface-color-hover);
        }
    }
}

.user-profile-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--component-md-gap);
    margin: var(--container-lg-block);
}

.user-profile-banner__avatar {

    width: calc(var(--icon-size-xl) * 2);
    height: calc(var(--icon-size-xl) * 2);
    aspect-ratio: 1;
    background-color: var(--color-accent-800);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-000);
    font-size: var(--text-size-200);
    font-weight: 600;
}

.user-profile-banner__title {
    flex-grow: 1;
}

.user-profile-banner__actions {

}


.menu {

    --spacing-3: 1rem;
    --check-width: 0;


    min-height: 0;
    max-height: inherit;
    overflow: auto;
    min-width: 150px;
    outline: none;
    border-radius: inherit;
    display: grid;

    grid-template-columns: var(--check-width) auto 1fr auto;
    grid-auto-rows: max-content;

    &:has(> [data-selection-mode]) {
        --check-width: var(--spacing-6);
    }

    &[data-empty] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: italic;
        min-height: var(--spacing-8);
    }
}

.menu__item {
    --_surface-color: transparent;
    --_text-color: var(--text-color);
    --_text-description-color: var(--text-color-description);

    padding: var(--component-md-block) var(--component-md-inline);
    outline: none;
    cursor: default;
    color: var(--_text-color);
    background-color: var(--_surface-color);
    border-radius: var(--component-md-radius);
    position: relative;
    display: grid;
    grid-column-start: 1;
    grid-column-end: -1;
    grid-template-areas: "check icon label end"
        ". . desc end";
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: var(--component-md-gap);
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;

    svg {
        grid-area: icon;
        width: calc(var(--icon-size-md) * 1.5);
        height: calc(var(--icon-size-md) * 1.5);
        aspect-ratio: 1;
    }

    /* >svg:not(.lucide-check, .lucide-dot, .lucide-chevron-right) {
        grid-area: icon;
        width: var(--spacing-4);
        height: var(--spacing-4);
        justify-self: center;
        margin-inline-end: var(--spacing-2);
    } */

    /* &:first-of-type {
        margin-top: var(--spacing);
    }

    &:last-of-type {
        margin-bottom: var(--spacing);
    } */

    &[data-open],
    &[data-pressed] {
        --_surface-color: var(--surface-color-hightlight);
    }

    &[data-focused] {
        --_surface-color: var(--surface-color-hightlight);
    }

    &[data-selection-mode] {

        /* .lucide-check,
        .lucide-dot {
            grid-area: check;
            width: var(--spacing-4);
            height: var(--spacing-4);
        }

        .lucide-check {
            stroke-width: 3px;
        }

        .lucide-dot {
            scale: 3;
        } */
    }

    &[href] {
        text-decoration: none;
        cursor: pointer;
    }

    &[data-disabled] {
        --_text-color: var(--text-color-on-disabled);
        --_text-description-color: var(--text-color-on-disabled);
    }

    .react-aria-Text:not([slot]),
    [slot=label] {
        grid-area: label;
        font-weight: var(--text-weight-medium);
    }

    [slot=description] {
        font-size: var(--text-size-sm);
        color: var(--_text-description-color);
        grid-area: desc;
    }

    kbd {
        grid-area: end;
        justify-self: end;
        margin-inline-start: var(--spacing-4);
        font-family: system-ui;
        font-size: var(--text-size-sm);
        text-align: end;
        background: var(--highlight-hover);
        border: 0.5px solid var(--highlight-pressed);
        padding: 0 var(--spacing-1);
        border-radius: var(--radius-sm);
    }

    &[data-focused] kbd {
        background: rgb(255 255 255 / 0.1);
        border-color: rgb(255 255 255 / 0.2);
    }
/*
    .lucide-chevron-right {
        grid-area: end;
        margin-left: var(--spacing-1);
        justify-self: end;
        width: var(--spacing-4);
        height: var(--spacing-4);
    } */
}

.menu__section {
    display: grid;
    grid-column-start: 1;
    grid-column-end: -1;
    --check-width: 0;
    grid-template-columns: var(--check-width) auto 1fr auto;

    margin: var(--component-md-block) var(--component-md-inline);

    /* &:has(> [data-selection-mode]) {
        --check-width: var(--spacing-6);
    }

    .react-aria-Header {
        grid-column-start: 1;
        grid-column-end: -1;
        font-size: var(--font-size-sm);
        font-weight: 600;
        font-variation-settings: initial;
        padding: var(--spacing-1) var(--spacing-3);
        background: var(--gray-100);
        border-block: 0.5px solid var(--gray-400);
        cursor: default;
        user-select: none;
        box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);

        @media (prefers-color-scheme: dark) {
            box-shadow: inset 0px 4px 8px var(--gray-200);
        }
    }

    &:first-child .react-aria-Header {
        margin-top: -0.5px;
    } */
}

.react-aria-Menu .react-aria-Separator {
    grid-column-start: 1;
    grid-column-end: -1;
    margin: 0 var(--spacing-2);
    border: 0;
    border-top: 0.5px solid var(--border-color);
    height: auto;
    width: auto;

    .react-aria-MenuItem+& {
        margin-block-start: var(--spacing-1);
    }

    &:has(+ .react-aria-MenuItem) {
        margin-block-end: var(--spacing-1);
    }
}


/* primatives */
:root {
    --color-black-500: #000000FF;
    --color-white-500: #FFFFFFFF;

    --color-amber-100: #FFF4E4FF;
    --color-amber-200: #FFE8C6FF;
    --color-amber-300: #FFDCA1FF;
    --color-amber-400: #FFCF72FF;
    --color-amber-500: #FFC107FF;
    --color-amber-600: #E4AD06FF;
    --color-amber-700: #C69505FF;
    --color-amber-800: #A17A04FF;
    --color-amber-900: #725603FF;

    --color-blue-100: #E5EEFDFF;
    --color-blue-200: #C7DBFAFF;
    --color-blue-300: #A3C7F8FF;
    --color-blue-400: #76B0F5FF;
    --color-blue-500: #2196F3FF;
    --color-blue-600: #1E86D9FF;
    --color-blue-700: #1A74BCFF;
    --color-blue-800: #155F9AFF;
    --color-blue-900: #0F436DFF;

    --color-brown-100: #EAE7E6FF;
    --color-brown-200: #D4CDCBFF;
    --color-brown-300: #BBAEABFF;
    --color-brown-400: #9D8983FF;
    --color-brown-500: #795548FF;
    --color-brown-600: #6C4C40FF;
    --color-brown-700: #5E4238FF;
    --color-brown-800: #4D362EFF;
    --color-brown-900: #362620FF;

    --color-cyan-100: #E4F3F7FF;
    --color-cyan-200: #C6E7EFFF;
    --color-cyan-300: #A1D9E6FF;
    --color-cyan-400: #72CBDDFF;
    --color-cyan-500: #00BCD4FF;
    --color-cyan-600: #00A8BEFF;
    --color-cyan-700: #0092A4FF;
    --color-cyan-800: #007786FF;
    --color-cyan-900: #00545FFF;

    --color-deep-orange-100: #FFE7E5FF;
    --color-deep-orange-200: #FFCDC7FF;
    --color-deep-orange-300: #FFAFA3FF;
    --color-deep-orange-400: #FF8A76FF;
    --color-deep-orange-500: #FF5722FF;
    --color-deep-orange-600: #E44E1EFF;
    --color-deep-orange-700: #C6431AFF;
    --color-deep-orange-800: #A13716FF;
    --color-deep-orange-900: #72270FFF;

    --color-deep-purple-100: #E9E6F2FF;
    --color-deep-purple-200: #D0C9E5FF;
    --color-deep-purple-300: #B4A7D7FF;
    --color-deep-purple-400: #937DC7FF;
    --color-deep-purple-500: #673AB7FF;
    --color-deep-purple-600: #5C34A4FF;
    --color-deep-purple-700: #502D8EFF;
    --color-deep-purple-800: #412574FF;
    --color-deep-purple-900: #2E1A52FF;

    --color-gray-50: #F6F6F6;
    --color-gray-100: #EFEFEFFF;
    --color-gray-200: #DDDDDDFF;
    --color-gray-300: #CACACAFF;
    --color-gray-400: #B6B6B6FF;
    --color-gray-500: #9E9E9EFF;
    --color-gray-600: #8D8D8DFF;
    --color-gray-700: #7A7A7AFF;
    --color-gray-800: #646464FF;
    --color-gray-900: #474747FF;
    --color-gray-950: #242424;

    --color-green-100: #E7F1E7FF;
    --color-green-200: #CBE2CCFF;
    --color-green-300: #ACD3ADFF;
    --color-green-400: #85C287FF;
    --color-green-500: #4CAF50FF;
    --color-green-600: #449D48FF;
    --color-green-700: #3B883EFF;
    --color-green-800: #306F33FF;
    --color-green-900: #224E24FF;

    --color-indigo-100: #E6E7F2FF;
    --color-indigo-200: #CACCE4FF;
    --color-indigo-300: #A8ADD6FF;
    --color-indigo-400: #7F87C6FF;
    --color-indigo-500: #3F51B5FF;
    --color-indigo-600: #3848A2FF;
    --color-indigo-700: #313F8CFF;
    --color-indigo-800: #283372FF;
    --color-indigo-900: #1C2451FF;

    --color-light-blue-100: #E4F0FDFF;
    --color-light-blue-200: #C6E1FBFF;
    --color-light-blue-300: #A1D0F8FF;
    --color-light-blue-400: #72BDF6FF;
    --color-light-blue-500: #03A9F4FF;
    --color-light-blue-600: #0397DAFF;
    --color-light-blue-700: #0283BDFF;
    --color-light-blue-800: #026B9AFF;
    --color-light-blue-900: #014C6DFF;

    --color-light-green-100: #ECF4E6FF;
    --color-light-green-200: #D8E9CBFF;
    --color-light-green-300: #C2DDABFF;
    --color-light-green-400: #A9D084FF;
    --color-light-green-500: #8BC34AFF;
    --color-light-green-600: #7CAE42FF;
    --color-light-green-700: #6C9739FF;
    --color-light-green-800: #587B2FFF;
    --color-light-green-900: #3E5721FF;

    --color-lime-100: #F6F8E5FF;
    --color-lime-200: #ECF2C9FF;
    --color-lime-300: #E2EBA7FF;
    --color-lime-400: #D8E37DFF;
    --color-lime-500: #CDDC39FF;
    --color-lime-600: #B7C533FF;
    --color-lime-700: #9FAA2CFF;
    --color-lime-800: #828B24FF;
    --color-lime-900: #5C6219FF;

    --color-orange-100: #FFEEE4FF;
    --color-orange-200: #FFDCC6FF;
    --color-orange-300: #FFC8A1FF;
    --color-orange-400: #FFB172FF;
    --color-orange-500: #FF9800FF;
    --color-orange-600: #E48800FF;
    --color-orange-700: #C67600FF;
    --color-orange-800: #A16000FF;
    --color-orange-900: #724400FF;

    --color-pink-100: #FBE4E8FF;
    --color-pink-200: #F6C6CFFF;
    --color-pink-300: #F2A3B3FF;
    --color-pink-400: #EE7590FF;
    --color-pink-500: #E91E63FF;
    --color-pink-600: #D01B59FF;
    --color-pink-700: #B4174DFF;
    --color-pink-800: #93133FFF;
    --color-pink-900: #680D2CFF;

    --color-purple-100: #EFE5F1FF;
    --color-purple-200: #DDC7E3FF;
    --color-purple-300: #CAA4D3FF;
    --color-purple-400: #B477C2FF;
    --color-purple-500: #9C27B0FF;
    --color-purple-600: #8C239DFF;
    --color-purple-700: #791E88FF;
    --color-purple-800: #63196FFF;
    --color-purple-900: #46114FFF;

    --color-red-100: #FDE6E5FF;
    --color-red-200: #FBCAC8FF;
    --color-red-300: #F8A9A7FF;
    --color-red-400: #F6817CFF;
    --color-red-500: #F44336FF;
    --color-red-600: #DA3C30FF;
    --color-red-700: #BD342AFF;
    --color-red-800: #9A2A22FF;
    --color-red-900: #6D1E18FF;

    --color-teal-100: #E4EEECFF;
    --color-teal-200: #C6DBD7FF;
    --color-teal-300: #A1C7C1FF;
    --color-teal-400: #72B0A7FF;
    --color-teal-500: #009688FF;
    --color-teal-600: #00867AFF;
    --color-teal-700: #007469FF;
    --color-teal-800: #005F56FF;
    --color-teal-900: #00433DFF;

    --color-yellow-100: #FFFBE6FF;
    --color-yellow-200: #FFF7C9FF;
    --color-yellow-300: #FFF3A8FF;
    --color-yellow-400: #FFEF7EFF;
    --color-yellow-500: #FFEB3BFF;
    --color-yellow-600: #E4D235FF;
    --color-yellow-700: #C6B62EFF;
    --color-yellow-800: #A19525FF;
    --color-yellow-900: #72691AFF;

    --scale-scale-0: 0px;
    --scale-scale-10: 1px;
    --scale-scale-20: 2px;
    --scale-scale-40: 4px;
    --scale-scale-60: 6px;
    --scale-scale-80: 8px;
    --scale-scale-100: 9px;
    --scale-scale-200: 10px;
    --scale-scale-300: 11px;
    --scale-scale-400: 12px;
    --scale-scale-500: 14px;
    --scale-scale-600: 16px;
    --scale-scale-700: 18px;
    --scale-scale-800: 20px;
    --scale-scale-900: 22px;
    --scale-scale-1000: 25px;
    --scale-scale-1100: 28px;
    --scale-scale-1200: 32px;
    --scale-scale-1300: 36px;
    --scale-scale-1400: 40px;
    --scale-scale-1500: 44px;
    --scale-scale-1600: 48px;
}

/* aliases */
:root {
    --color-accent-100: var(--color-gray-100);
    --color-accent-200: var(--color-gray-200);
    --color-accent-300: var(--color-gray-300);
    --color-accent-400: var(--color-gray-400);
    --color-accent-500: var(--color-gray-500);
    --color-accent-600: var(--color-gray-600);
    --color-accent-700: var(--color-gray-700);
    --color-accent-800: var(--color-gray-800);
    --color-accent-900: var(--color-gray-900);

    --color-error-100: var(--color-red-100);
    --color-error-200: var(--color-red-200);
    --color-error-300: var(--color-red-300);
    --color-error-400: var(--color-red-400);
    --color-error-500: var(--color-red-500);
    --color-error-600: var(--color-red-600);
    --color-error-700: var(--color-red-700);
    --color-error-800: var(--color-red-800);
    --color-error-900: var(--color-red-900);

    --color-primary-000: var(--color-white-500);
    --color-primary-50: var(--color-gray-50);
    --color-primary-100: var(--color-gray-100);
    --color-primary-200: var(--color-gray-200);
    --color-primary-300: var(--color-gray-300);
    --color-primary-400: var(--color-gray-400);
    --color-primary-500: var(--color-gray-500);
    --color-primary-600: var(--color-gray-600);
    --color-primary-700: var(--color-gray-700);
    --color-primary-800: var(--color-gray-800);
    --color-primary-900: var(--color-gray-900);
    --color-primary-950: var(--color-gray-950);
    --color-primary-1000: var(--color-black-500);
    --color-success-100: var(--color-light-green-100);
    --color-success-200: var(--color-light-green-200);
    --color-success-300: var(--color-light-green-300);
    --color-success-400: var(--color-light-green-400);
    --color-success-500: var(--color-light-green-500);
    --color-success-600: var(--color-light-green-600);
    --color-success-700: var(--color-light-green-700);
    --color-success-800: var(--color-light-green-800);
    --color-success-900: var(--color-light-green-900);
    --color-warning-100: var(--color-amber-100);
    --color-warning-200: var(--color-amber-200);
    --color-warning-300: var(--color-amber-300);
    --color-warning-400: var(--color-amber-400);
    --color-warning-500: var(--color-amber-500);
    --color-warning-600: var(--color-amber-600);
    --color-warning-700: var(--color-amber-700);
    --color-warning-800: var(--color-amber-800);
    --color-warning-900: var(--color-amber-900);


    --color-amber-l: var(--color-amber-300);
    --color-amber-m: var(--color-amber-500);
    --color-amber-d: var(--color-amber-800);

    --color-blue-l: var(--color-blue-300);
    --color-blue-m: var(--color-blue-500);
    --color-blue-d: var(--color-blue-800);

    --color-brown-l: var(--color-brown-300);
    --color-brown-m: var(--color-brown-500);
    --color-brown-d: var(--color-brown-800);

    --color-cyan-l: var(--color-cyan-300);
    --color-cyan-m: var(--color-cyan-500);
    --color-cyan-d: var(--color-cyan-800);

    --color-deep-l: var(--color-deep-orange-300);
    --color-deep-m: var(--color-deep-orange-500);
    --color-deep-d: var(--color-deep-orange-800);

    --color-deep-l: var(--color-deep-purple-300);
    --color-deep-m: var(--color-deep-purple-500);
    --color-deep-d: var(--color-deep-purple-800);

    --color-gray-l: var(--color-gray-300);
    --color-gray-m: var(--color-gray-500);
    --color-gray-d: var(--color-gray-800);

    --color-green-l: var(--color-green-300);
    --color-green-m: var(--color-green-500);
    --color-green-d: var(--color-green-800);

    --color-indigo-l: var(--color-indigo-300);
    --color-indigo-m: var(--color-indigo-500);
    --color-indigo-d: var(--color-indigo-800);

    --color-light-blue-l: var(--color-light-blue-300);
    --color-light-blue-m: var(--color-light-blue-500);
    --color-light-blue-d: var(--color-light-blue-800);

    --color-light-green-l: var(--color-light-green-300);
    --color-light-green-m: var(--color-light-green-500);
    --color-light-green-d: var(--color-light-green-800);

    --color-lime-l: var(--color-lime-300);
    --color-lime-m: var(--color-lime-500);
    --color-lime-d: var(--color-lime-800);

    --color-orange-l: var(--color-orange-300);
    --color-orange-m: var(--color-orange-500);
    --color-orange-d: var(--color-orange-800);

    --color-pink-l: var(--color-pink-300);
    --color-pink-m: var(--color-pink-500);
    --color-pink-d: var(--color-pink-800);

    --color-purple-l: var(--color-purple-300);
    --color-purple-m: var(--color-purple-500);
    --color-purple-d: var(--color-purple-800);

    --color-red-l: var(--color-red-300);
    --color-red-m: var(--color-red-500);
    --color-red-d: var(--color-red-800);

    --color-teal-l: var(--color-teal-300);
    --color-teal-m: var(--color-teal-500);
    --color-teal-d: var(--color-teal-800);

    --color-yellow-l: var(--color-yellow-300);
    --color-yellow-m: var(--color-yellow-500);
    --color-yellow-d: var(--color-yellow-800);


    --scale-0: var(--scale-scale-0);
    --scale-10: var(--scale-scale-10);
    --scale-20: var(--scale-scale-20);
    --scale-40: var(--scale-scale-40);
    --scale-60: var(--scale-scale-60);
    --scale-80: var(--scale-scale-80);
    --scale-100: var(--scale-scale-100);
    --scale-200: var(--scale-scale-200);
    --scale-300: var(--scale-scale-300);
    --scale-400: var(--scale-scale-400);
    --scale-500: var(--scale-scale-500);
    --scale-600: var(--scale-scale-600);
    --scale-700: var(--scale-scale-700);
    --scale-800: var(--scale-scale-800);
    --scale-900: var(--scale-scale-900);
    --scale-1000: var(--scale-scale-1000);
    --scale-1100: var(--scale-scale-1100);
    --scale-1200: var(--scale-scale-1200);
    --scale-1300: var(--scale-scale-1300);
    --scale-1400: var(--scale-scale-1400);
    --scale-1500: var(--scale-scale-1500);
    --scale-1600: var(--scale-scale-1600);
}

/* tokens */
:root {
    color-scheme: light dark;

    --color-amber-light: var(--color-amber-l);
    --color-amber-medium: var(--color-amber-m);
    --color-amber-dark: var(--color-amber-d);

    --color-blue-light: var(--color-blue-l);
    --color-blue-medium: var(--color-blue-m);
    --color-blue-dark: var(--color-blue-d);

    --color-brown-light: var(--color-brown-l);
    --color-brown-medium: var(--color-brown-m);
    --color-brown-dark: var(--color-brown-d);

    --color-cyan-light: var(--color-cyan-l);
    --color-cyan-medium: var(--color-cyan-m);
    --color-cyan-dark: var(--color-cyan-d);

    --color-deep-light: var(--color-deep-l);
    --color-deep-medium: var(--color-deep-m);
    --color-deep-dark: var(--color-deep-d);

    --color-deep-light: var(--color-deep-l);
    --color-deep-medium: var(--color-deep-m);
    --color-deep-dark: var(--color-deep-d);

    --color-gray-light: var(--color-gray-l);
    --color-gray-medium: var(--color-gray-m);
    --color-gray-dark: var(--color-gray-d);

    --color-green-light: var(--color-green-l);
    --color-green-medium: var(--color-green-m);
    --color-green-dark: var(--color-green-d);

    --color-indigo-light: var(--color-indigo-l);
    --color-indigo-medium: var(--color-indigo-m);
    --color-indigo-dark: var(--color-indigo-d);

    --color-light-green-light: var(--color-light-green-l);
    --color-light-green-medium: var(--color-light-green-m);
    --color-light-green-dark: var(--color-light-green-d);

    --color-light-blue-light: var(--color-light-blue-l);
    --color-light-blue-medium: var(--color-light-blue-m);
    --color-light-blue-dark: var(--color-light-blue-d);

    --color-lime-light: var(--color-lime-l);
    --color-lime-medium: var(--color-lime-m);
    --color-lime-dark: var(--color-lime-d);

    --color-orange-light: var(--color-orange-l);
    --color-orange-medium: var(--color-orange-m);
    --color-orange-dark: var(--color-orange-d);

    --color-pink-light: var(--color-pink-l);
    --color-pink-medium: var(--color-pink-m);
    --color-pink-dark: var(--color-pink-d);

    --color-purple-light: var(--color-purple-l);
    --color-purple-medium: var(--color-purple-m);
    --color-purple-dark: var(--color-purple-d);

    --color-red-light: var(--color-red-l);
    --color-red-medium: var(--color-red-m);
    --color-red-dark: var(--color-red-d);

    --color-teal-light: var(--color-teal-l);
    --color-teal-medium: var(--color-teal-m);
    --color-teal-dark: var(--color-teal-d);

    --color-yellow-light: var(--color-yellow-l);
    --color-yellow-medium: var(--color-yellow-m);
    --color-yellow-dark: var(--color-yellow-d);


    /* COMPONENT */
    --component-lg-block: var(--scale-60);
    --component-lg-inline: var(--scale-200);
    --component-lg-gap: var(--scale-40);
    --component-lg-radius: var(--scale-40);

    --component-md-block: var(--scale-60);
    --component-md-inline: var(--scale-300);
    --component-md-gap: var(--scale-60);
    --component-md-radius: var(--scale-40);

    --component-sm-block: var(--scale-40);
    --component-sm-inline: var(--scale-100);
    --component-sm-gap: var(--scale-20);
    --component-sm-radius: var(--scale-20);

    /* CONTAINER */
    --container-xl-block: var(--scale-1000);
    --container-xl-inline: var(--scale-1500);
    --container-xl-gap: var(--scale-1000);
    --container-xl-radius: var(--scale-200);

    --container-lg-block: var(--scale-800);
    --container-lg-inline: var(--scale-1300);
    --container-lg-gap: var(--scale-800);
    --container-lg-radius: var(--scale-100);

    --container-md-block: var(--scale-600);
    --container-md-inline: var(--scale-1100);
    --container-md-gap: var(--scale-600);
    --container-md-radius: var(--scale-80);

    --container-sm-block: var(--scale-400);
    --container-sm-inline: var(--scale-900);
    --container-sm-gap: var(--scale-400);
    --container-sm-radius: var(--scale-60);

    /* ICON */
    --icon-size-xl: var(--scale-700);
    --icon-size-lg: var(--scale-800);
    --icon-size-md: var(--scale-200);
    --icon-size-sm: var(--scale-300);

    /* SPACE */
    --space-xxl: var(--scale-1200);
    --space-xl: var(--scale-700);
    --space-lg: var(--scale-400);
    --space-md: var(--scale-200);
    --space-sm: var(--scale-60);
    --space-xs: var(--scale-40);

    /* SURFACE */
    --surface-color: light-dark(var(--color-primary-000), var(--color-primary-1000));
    --surface-color-hover: light-dark(var(--color-primary-100), var(--color-primary-900));

    --surface-color-hightlight: light-dark(var(--color-primary-50), var(--color-primary-950));

    --surface-color-active: var(--color-accent-100);
    --surface-color-disabled: var(--color-primary-100);
    --surface-color-emphasis: var(--color-primary-100);

    --surface-color-accent: var(--color-primary-50);
    --surface-color-accent-hover: var(--color-accent-100);

    --surface-color-secondary: var(--color-primary-1000);
    --surface-color-secondary-hover: var(--color-primary-1000);
    --surface-color-secondary-disabled: var(--color-primary-1000);

    /* BORDER */
    --border-color: light-dark(var(--color-primary-300), var(--color-primary-700));
    --border-color-active: var(--color-accent-400);
    --border-color-accent: var(--color-accent-300);
    --border-color-disabled: var(--color-primary-300);
    --border-color-error: var(--color-error-500);
    --border-color-separator: light-dark(var(--color-primary-100), var(--color-primary-700));
    --border-color-secondary: var(--color-primary-1000);

    --border-radius-lg: var(--scale-scale-100);
    --border-radius-md: var(--scale-60);
    --border-radius-sm: var(--scale-20);

    --border-width: var(--scale-10);
    --border-width-x: var(--scale-20);

    /* TEXT */
    --text-color: light-dark(var(--color-primary-1000), var(--color-primary-000));
    --text-color-description: light-dark(var(--color-primary-800), var(--color-primary-400));
    --text-color-error: var(--color-error-500);
    --text-color-on-accent: var(--color-primary-1000);
    --text-color-on-secondary: var(--color-primary-000);
    --text-color-on-disabled: var(--color-primary-400);

    --text-color-secondary: var(--color-primary-000);
    --text-color-secondary-on-disabled: var(--color-primary-000);

    --text-family: "Geist", sans-serif;
    --text-line-height: 1.125;

    --text-size-xl: var(--scale-900);
    --text-size-lg: var(--scale-700);
    --text-size-md: var(--scale-500);
    --text-size-sm: var(--scale-400);
    --text-size-xs: var(--scale-300);

    --text-weight-dark: 500;
    --text-weight-bold: 400;
    --text-weight-medium: 300;
    --text-weight-light: 200;

    --text-letter-spacing: .015rem;

    /* ANIMATION */
    --animation: 0.15s cubic-bezier(.45, 0, .4, 1);

    --side-box-shadow: -10px 0px 64px var(--color-primary-400);
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 14px;
}

/* Remove default margin in favour of better control in authored CSS */
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {
    margin-block-end: 0;
}

h1,h2,h3,h4,h5,h6,strong {
    font-weight: 400;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}


/* Set shorter line heights on headings and interactive elements */
h1,h2,h3,h4,button,input,label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,h2,h3,h4,h5,h6 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,svg,picture {
    max-width: 100%;
    display: inline-block;
}

p {
    text-wrap: pretty;
}

section>p:first-of-type,
footer>p:first-of-type,
aside>p:first-of-type {
    margin-block-start: 0;
}

code {
    font-weight: inherit;
}

/* Inherit fonts for inputs and buttons */
input,button,textarea,select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

body {
    font-size: var(--text-size-md);
    font-family: var(--text-family);
    font-optical-sizing: auto;
    font-weight: var(--text-weight-medium);
    font-style: normal;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    line-height: var(--text-line-height);
    letter-spacing: var(--text-letter-spacing);

    background-color: var(--surface-color-hightlight);
    margin: 0;
    padding: 0;
}


@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fade-out {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes slide-in {
    from {transform: translateY(-5px);}
    to {transform: translateY(0);}
}

@keyframes slide-out {
    from {transform: translateY(0);}
    to {transform: translateY(-5px);}
}

@keyframes scale-in {
    from {transform: scale(0.9);}
    to {transform: scale(1);}
}

@keyframes scale-out {
    from {transform: scale(1);}
    to {transform: scale(0.9);}
}

.frame {
    display: grid;

    height: 100vh;

    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;

    .frame__header {

    }
    .frame__nav {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
    }
    .frame__main {
        grid-column: 2 / span 1;
        grid-row: 1 / span 3;
        overflow: scroll;
        padding: var(--container-md-block) var(--container-md-inline);

        search {
            padding-block-end: var(--container-md-block);
            text-align: end;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

            svg {
                height: auto;
                width: var(--icon-size-xl);
            }
        }
    }
    .frame__footer {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;

        .frame__footer__container {
            margin: 0;
            padding: var(--component-sm-inline);
        }
    }
    /* TODO: This isn't right */
    .frame__brand {
        margin: 0;
        padding: calc(var(--container-xl-block) + var(--component-sm-inline));
        padding-block-end: 0;

        svg {
            width: 4rem;
        }
    }
    .frame__search-button {
        appearance: none;
        border: none;
        background: none;
        margin: 0;
        padding: 0;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
    }
}

.article {
    display: grid;
    grid-template-rows: auto 1fr;
    --_min-height: calc(100vh - (var(--container-md-block) * 2) - var(--icon-size-xl) - var(--container-md-block));

    min-height: var(--_min-height);

    border-radius: var(--container-lg-radius);
    border: var(--border-width) solid var(--border-color-separator);
    background-color: var(--surface-color);

    &.article--condensed {
        --_min-height: auto;
    }

    .article__header {
        padding: var(--container-lg-block) var(--container-lg-inline);
        border-block-end: var(--border-width) solid var(--border-color-separator);
        font-weight: var(--text-weight-bold);

        display: flex;
        gap: var(--container-lg-gap);
    }

    .article__content {
        display: flex;
        flex-direction: column;
        gap: var(--container-md-gap);
        padding: var(--container-lg-block) var(--container-lg-inline);

        &.article__content--notification {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }

    .article__footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: var(--container-sm-gap);
        padding: var(--container-lg-block) var(--container-lg-inline);
        border-block-start: var(--border-width) solid var(--border-color-separator);
    }

    .article__notification-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--component-sm-gap);

        margin: 0;
        font-size: var(--text-size-md);
        color: var(--text-color-description);

        svg {
            height: auto;
            width: var(--icon-size-xl);
            fill: currentColor;
        }
    }
}

/* FIXME: It seems that I can't override the className of this component */

.react-aria-Breadcrumbs {
    --_text-color: var(--text-color);
    --_text-size-md: var(--text-size-md);
    --_text-size-sm: var(--text-size-sm);
    --_text-weight: var(--text-weight-bold);
    --_inline-gap: var(--component-sm-gap);

    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--_text-color);

    svg {
        height: auto;
        width: var(--_text-size-md);
        display: inline-block;
        margin-inline: var(--_inline-gap);
    }

    .react-aria-Breadcrumb {
        display: flex;
        align-items: center;
        font-weight: var(--_text-weight);
        font-size: var(--_text-size-sm);
    }
}


a:has(.profile-banner) {
    --_outline-color: var(--border-color-active);

    text-decoration: none;

    &:focus-visible {
        outline-offset: calc(var(--border-width) * -1);
        outline-width: var(--border-width-x);
        /* TODO: why does this need to be auto? */
        outline-style: auto;
        outline-color: var(--_outline-color);
    }
}

.profile-banner {
    --_surface-color: transparent;
    --_surface-color-active: var(--surface-color-hightlight);

    --_avatar-color: var(--color-red-500);
    --_avatar-color-inactive: var(--color-red-300);
    --_avatar-color-text: var(--color-primary-000);
    --_avatar-color-badge: var(--color-orange-500);
    --_avatar-size: calc(var(--icon-size-xl) * 2);

    --_gap: var(--component-md-gap);
    --_radius: var(--component-md-radius);
    /* --_padding: var(--container-md-block) var(--container-md-inline); */
    --_padding: 0;

    --_badge-size: var(--icon-size-sm);

    --_avatar-font-size: var(--text-size-md);
    --_avatar-font-weight: var(--text-weight-dark);

    --_title_font-size: var(--text-size-md);
    --_title_font-weight: var(--text-weight-bold);
    --_title_font-color: currentColor;

    --_subtitle-font-size: var(--text-size-sm);
    --_subtitle-font-weight: var(--text-weight-medium);
    --_subtitle-font-color: var(--text-color-description);

    display: flex;
    gap: var(--_gap);
    background-color: var(--_surface-color);

    border-radius: var(--_radius);
    padding: var(--_padding);
    width: 100%;
    transition:
        background-color var(--animation),
        border-color var(--animation),
    ;

    .profile-banner__avatar {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;

        width: var(--_avatar-size);
        height: var(--_avatar-size);
        aspect-ratio: 1;

        background-color: var(--_avatar-color);
        color: var(--_avatar-color-text);
        font-size: var(--_avatar-font-size);
        font-weight: var(--_avatar-font-weight);

        border-radius: var(--_radius);

        &.profile-banner__avatar--disabled {
            --_avatar-color: var(--_avatar-color-inactive);
        }
    }

    .profile-banner__title {
        flex-grow: 1;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--_gap);
    }
    .profile-banner__maintitle {
        margin: 0;
        font-size: var(--_title_font-size);
        font-weight: var(--_title_font-weight);
        color: var(--_title_font-color);
    }
    .profile-banner__subtitle {
        margin: 0;
        font-size: var(--_subtitle-font-size);
        font-weight: var(--_subtitle-font-weight);
        color: var(--_subtitle-font-color);
    }

    &.profile-banner--slim {
        --_padding: 0;
    }
    &.profile-banner--padded {
        --_surface-color: var(--surface-color);
        --_padding: var(--container-md-block) var(--container-md-inline);;
    }
    &.profile-banner--active {
        --_surface-color: var(--_surface-color-active);
    }

    &.profile-banner--mark {
        .profile-banner__avatar::before {
            display: block;
            content: '';
            width: var(--_badge-size);
            height: var(--_badge-size);
            position: absolute;
            background-color: var(--_avatar-color);
            top: 0;
            right: 0;
            border-radius: 50%;
            border: var(--border-width-x) solid var(--_surface-color);
            transform: translate(50%, -50%);
        }
    }

    &.profile-banner--badge {
        .profile-banner__avatar::after {
            display: block;
            content: '';
            width: var(--_badge-size);
            height: var(--_badge-size);
            position: absolute;
            background-color: var(--_avatar-color-badge);
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: var(--border-width-x) solid var(--_surface-color);
            transform: translate(-50%, 50%);
        }
    }

    &.profile-banner--disabled {
        --_title_font-color: var(--text-color-on-disabled);
        --_subtitle-font-color: var(--text-color-on-disabled);

        cursor: default;
    }
    &.profile-banner--empty {
        --_avatar-color: var(--surface-color);
        --_avatar-color-inactive: var(--surface-color);
        --_avatar-color-text: var(--color-primary-000);
        --_avatar-color-badge: var(--color-orange-500);

        align-items: center;

        .profile-banner__avatar {
            border: var(--border-width) dashed var(--text-color);
        }
    }
    &.profile-banner--red {
            --_avatar-color: var(--color-red-medium);
            --_avatar-color-inactive: var(--color-red-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-red-light);
            }
    }
    &.profile-banner--pink {
            --_avatar-color: var(--color-pink-medium);
            --_avatar-color-inactive: var(--color-pink-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-pink-light);
            }
    }
    &.profile-banner--purple {
            --_avatar-color: var(--color-purple-medium);
            --_avatar-color-inactive: var(--color-purple-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-purple-light);
            }
    }
    &.profile-banner--deep-purple {
            --_avatar-color: var(--color-deep-purple-medium);
            --_avatar-color-inactive: var(--color-deep-purple-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-deep-purple-light);
            }
    }
    &.profile-banner--indigo {
            --_avatar-color: var(--color-indigo-medium);
            --_avatar-color-inactive: var(--color-indigo-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-indigo-light);
            }
    }
    &.profile-banner--blue {
            --_avatar-color: var(--color-blue-medium);
            --_avatar-color-inactive: var(--color-blue-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-blue-light);
            }
    }
    &.profile-banner--light-blue {
            --_avatar-color: var(--color-light-blue-medium);
            --_avatar-color-inactive: var(--color-light-blue-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-light-blue-light);
            }
    }
    &.profile-banner--cyan {
            --_avatar-color: var(--color-cyan-medium);
            --_avatar-color-inactive: var(--color-cyan-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-cyan-light);
            }
    }
    &.profile-banner--teal {
            --_avatar-color: var(--color-teal-medium);
            --_avatar-color-inactive: var(--color-teal-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-teal-light);
            }
    }
    &.profile-banner--green {
            --_avatar-color: var(--color-green-medium);
            --_avatar-color-inactive: var(--color-green-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-green-light);
            }
    }
    &.profile-banner--light-green {
            --_avatar-color: var(--color-light-green-medium);
            --_avatar-color-inactive: var(--color-light-green-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-light-green-light);
            }
    }
    &.profile-banner--lime {
            --_avatar-color: var(--color-lime-medium);
            --_avatar-color-inactive: var(--color-lime-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-lime-light);
            }
    }
    &.profile-banner--yellow {
            --_avatar-color: var(--color-yellow-medium);
            --_avatar-color-inactive: var(--color-yellow-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-yellow-light);
            }
    }
    &.profile-banner--amber {
            --_avatar-color: var(--color-amber-medium);
            --_avatar-color-inactive: var(--color-amber-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-amber-light);
            }
    }
    &.profile-banner--orange {
            --_avatar-color: var(--color-orange-medium);
            --_avatar-color-inactive: var(--color-orange-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-orange-light);
            }
    }
    &.profile-banner--deep-orange {
            --_avatar-color: var(--color-deep-orange-medium);
            --_avatar-color-inactive: var(--color-deep-orange-light);
            --_avatar-color-text: var(--color-primary-1000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-deep-orange-light);
            }
    }
    &.profile-banner--brown {
            --_avatar-color: var(--color-brown-medium);
            --_avatar-color-inactive: var(--color-brown-light);
            --_avatar-color-text: var(--color-primary-000);
            --_avatar-color-badge: var(--color-orange-medium);

            &.profile-banner--disabled {
                --_avatar-color: var(--color-brown-light);
            }
    }
}

.profile-banner-list {
    display: flex;
    flex-direction: column;
    gap: var(--component-md-gap);

    list-style: none;
    margin: 0;
    padding: 0;

    .profile-banner-list-item {
        animation:
            fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
            scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
            slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards
        ;
        opacity: 0;
    }
}

.dialog {
    --_radius: var(--container-xl-radius);
    /* FIXME: make this into a variable */
    --_shadow: 0 0 13px -4px rgb(0 0 0 / .5);

    padding: 0;
    border: none;
    border-radius: var(--_radius);
    box-shadow: var(--_shadow);
}

/* 2. Apply animation when the dialog is open */
.dialog[open] {
    animation:
        fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards
    ;
    opacity: 0;
}

/* 3. Define the exit animation using a class added by JS */
.dialog.closing {
    animation:
        fade-out var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        scale-out var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        slide-out var(--animation) calc(sibling-index() * 25ms) 1 forwards
    ;
}

.dialog::backdrop {
    opacity: 0;
    animation:
        fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards
    ;
}

.dialog.closing::backdrop {
    animation:
        fade-out var(--animation) calc(sibling-index() * 25ms) 1 forwards
    ;
}

.list-count {
    font-size: var(--text-size-sm);
    color: var(--text-color-description);
}

.model-list {
    --_gap: 0; /*var(--container-md-gap);*/

    --_template-list: 1fr;
    --_template-grid: repeat(auto-fill, minmax(300px, 1fr) );
    --_template: var(--_template-list);

    --_icon-size: var(--icon-size-xl);

    display: grid;
    grid-template-columns: var(--_template);
    gap: var(--_gap);

    list-style: none;
    margin-block: 0;
    margin-inline: calc(var(--container-md-inline) * -1);
    padding: 0;

    transition: gap var(--animation);

    &.model-list--grid {
        --_template: var(--_template-grid);
    }

    &.model-list--loading {
        height: 100%;
        svg {
            width: var(--_icon-size);
            fill: var(--text-color-description);
            display: block;
            margin: auto;
        }
    }

    .model-list__item {
        &.model-list__item--animate {
            animation:
                fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
                scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
                slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards
            ;
            opacity: 0;
        }
    }
}

.toolbar-container {
    --_gap: var(--component-md-gap);

    display: flex;
    flex-direction: row;
    /* align-items: flex-end; */
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--_gap);
}

.separator {
    grid-column: 1 / -1;
    border: none;
    border-block-end: var(--border-width) solid var(--border-color-separator);
    width: 100%;
    margin: var(--container-lg-gap) 0;
    padding: 0;

    &[orientation="vertical"] {
        border-block-end: none;
        border-inline-end: var(--border-width) solid var(--border-color-separator);
        margin: 0 var(--component-sm-gap);
        width: var(--border-width);
    }
}


.side-panel {
    position: fixed;
    inset: 0 0 0 50%;
    background-color: var(--surface-color);
    display: grid;
    grid-template-rows: auto 1fr auto;

    border-inline-start: var(--border-width) solid var(--border-color-separator);

    /* FIXME: this needs to be a variable */
    box-shadow: var(--side-box-shadow);

    .side-panel__header {
        display: flex;
        align-items: center;
        padding: var(--container-lg-block) var(--container-lg-inline);
        gap: var(--container-lg-block);
        border-block-end: var(--border-width) solid var(--border-color-separator);
        font-weight: var(--text-weight-bold);
        font-size: var(--text-size-sm);
        svg {
            height: 1rem;
        }
    }

    .side-panel__backlink {
        color: currentColor;
    }

    .side-panel__content {
        padding: var(--container-lg-block) var(--container-lg-inline);
        overflow-x: scroll;

        container: side-panel / inline-size;

        .side-panel__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--container-lg-gap);

            @container (width < 350px) {
                grid-template-columns: 1fr;
            }

        }

        .side-panel__grid-item {
            display: flex;
            flex-direction: column;
            gap: var(--container-md-gap);

            &.side-panel__grid-item--stretch {
                grid-column: 1 / -1;
            }
        }

        .side-panel__grid-separator{
            grid-column: 1 / -1;
            border: none;
            border-block-end: var(--border-width) solid var(--border-color-separator);
            width: 100%;
            margin: var(--container-lg-gap) 0;
            padding: 0;
        }
    }

    .side-panel__footer {
        padding: var(--container-lg-block) var(--container-lg-inline);
        border-block-start: var(--border-width) solid var(--border-color-separator);
        font-weight: var(--text-weight-bold);

        /*
            FIXME:
            this is a litle bit hacky,
            this is just so that texarea grows wen focus inside the site-banel-foot
        */
        textarea {
            height: 4rem;
            resize: none;
            transition: height var(--animation);
        }
        textarea:focus {
            height: 25rem;
        }
    }

    .side-panel__backlink {
        line-height: 0;
    }

    .side-panel__notification-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--component-sm-gap);

        margin: 0;
        font-size: var(--text-size-md);
        color: var(--text-color-description);

        svg {
            height: auto;
            width: var(--icon-size-xl);
            fill: currentColor;
        }
    }
}

.boats-item__form {
    display: contents;
}


.books-item-display__form {
    display: contents;
}

.employee-permissions {
    display: grid;
    grid-template-columns: 1fr 2fr;

    @container (width < 350px) {
        grid-template-columns: 1fr;
        gap: var(--container-md-gap);
    }

    .employee-permissions__details {
        margin-block: 0;
    }

    .employee-permissions__details-summary {
        font-weight: var(--text-weight-bold);
        font-size: var(--text-size-sm);
        cursor: pointer;
    }

    .employee-permissions__details-list {
        list-style: none;
        margin-block: var(--container-md-block);
        margin-inline: 0;
        padding: 0;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--container-md-gap);

        @container (width < 550px) {
            grid-template-columns: 1fr;
            gap: var(--container-md-gap);
        }

    }
    .employee-permissions__details-item {

    }
}

.employee-item-display__form {
    display: contents;
}

.employee-item-display__keyvalue-list {
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
    padding: 0;
    gap: calc(var(--container-lg-gap) / 2) var(--container-lg-gap);

    /* FIXME: this might be a bit of a hack */
    > * { margin: 0; }
    /* FIXME: this might be a bit of a hack */
    > dt {
        font-weight: var(--text-weight-bold);
        font-size: var(--text-size-sm);
    }
}
.employee-item-display__blurb {
    p {
        color: var(--text-color-description);
    }
    p:first-child {
        margin-block-start: 0;
    }
}

.employee-item-display__note-input textarea::focus {
    height: 550px;
}

/* Small tablets and larger mobile devices (481px - 768px) */
/* @media (min-width: 481px) { } */

/* Tablets and small laptops (769px - 1024px) */
/* @media (min-width: 769px) { } */

/* Large desktops and high-resolution screens (1025px and up) */
/* @media (min-width: 1025px) {} */

/* Extra-large screens (1440px and up) */
/* @media (min-width: 1440px) {} */


.index-display {}


.nationality-item-display__form {
    display: contents;
}

.payment-type-group-item-display__form {
    display: contents;
}

.payment-type-item-display__form {
    display: contents;
}



.select-search {
    anchor-scope: --dialog;

    anchor-name: --dialog;

    dialog:focus {
        outline: none;
    }

    dialog {
        background-color: var(--surface-color);
        position-anchor: --dialog;
        top: calc(anchor(bottom) + var(--component-md-gap));
        left: anchor(left);
        margin: 0;
        padding: var(--container-lg-block);
        z-index: 1000;

        --_radius: var(--container-md-radius);
        --_shadow: 0 0 13px -4px rgb(0 0 0 / .5);
        border: none;
        border-radius: var(--_radius);
        box-shadow: var(--_shadow);
    }

    dialog[open] {
        animation:
            fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
            scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
            slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards;
        opacity: 0;
    }
}


.pickup-location-item-display__form {
    display: contents;
}

.pickup-location-item-display__resellers-display {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--container-lg-gap);
}

.pickup-location-display__new-form {
    display: contents;
}

.bar-chart-time {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    cursor: crosshair;
}
.bar-chart-time__bar {
    stroke: var(--surface-color-secondary);
    cursor: auto;
}

.bar-chart-time__axis-line {
    stroke: var(--border-color-secondary);
    stroke-width: .6;
}
.bar-chart-time__axis-line--dashed {
    stroke-dasharray: 2 16;
}
.bar-chart-time__value-label {
    font-size: var(--text-size-sm);
}
.bar-chart-time__shade {
    fill: rgb(from var(--border-color-secondary) r g b /.05);
    opacity: 0;

    animation: bar-char-shade-fadein var(--animation);
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

@keyframes bar-char-shade-fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* .bar-chart-time__key-line {
    stroke: var(--color-primary-900);
    stroke-width: 1;
}

.bar-chart-time__key-label {
    font-size: var(--text-size-70);
}
.bar-chart-time__value-label {
    font-size: var(--text-size-70);
}
.bar-chart-time__vertical-lines {
    stroke: var(--color-primary-300);
    stroke-dasharray: 2 4;
}

.bar-chart-time__horizontal-lines {
    stroke: var(--color-primary-300);
    stroke-dasharray: 2 4;
}

.bar-chart-time__shade {
    fill: rgba(170,170,170,.2);
} */

/* - = - = - = - = - = - = - = - = - = - = */

.pie-chart {}

.pie-chart__arc {
    fill: var(--color-primary-1000);
}
.pie-chart__arc--inactive {
    fill: var(--color-primary-200);
}

.reseller-item-display__form {
    display: contents;
}


.schedule-item-display__form {
    display: contents;
}

.schedule-item-display__table {
    width: 100%;

    td, th {
        padding: var(--component-sm-block) var(--component-sm-inline);

        svg {
            width: var(--icon-size-lg);
        }
    }
    .schedule-item-display__table-head {
        background-color: var(--surface-color);
        position: sticky;
        top: calc(var(--container-lg-block) * -1);
    }

    .schedule-item-display__table-body {}
}


.tour-item-display__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.tour-item-display__title {
    grid-column: span 2;
    background-color: var(--color-primary-100);
    border-block-end: var(--border);
    margin: calc(-1 * var(--spacing-800));
    margin-block-end: 0;
    padding-inline: var(--spacing-600);
    padding-block: var(--spacing-300);
}

.tour-manager-display__calendar {
    svg {
        width: calc(var(--icon-size-xl) * 1.5);
    }
}

.profile-pill {

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--component-sm-gap);

    background-color: var(--_surface-color);
    color: var(--_surface-color-text);
    font-size: var(--text-size-sm);
    font-weight: var(--text-weight-bold);
    padding-inline: var(--component-sm-inline);
    padding-block: var(--component-sm-block);
    border-radius: var(--component-sm-radius);

    .profile-pill__title {
        max-width: 10ch;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    &.profile-pill--red {
            --_surface-color: var(--color-red-medium);
            --_surface-color-inactive: var(--color-red-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-red-light);
            }
    }
    &.profile-pill--pink {
            --_surface-color: var(--color-pink-medium);
            --_surface-color-inactive: var(--color-pink-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-pink-light);
            }
    }
    &.profile-pill--purple {
            --_surface-color: var(--color-purple-medium);
            --_surface-color-inactive: var(--color-purple-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-purple-light);
            }
    }
    &.profile-pill--deep-purple {
            --_surface-color: var(--color-deep-purple-medium);
            --_surface-color-inactive: var(--color-deep-purple-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-deep-purple-light);
            }
    }
    &.profile-pill--indigo {
            --_surface-color: var(--color-indigo-medium);
            --_surface-color-inactive: var(--color-indigo-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-indigo-light);
            }
    }
    &.profile-pill--blue {
            --_surface-color: var(--color-blue-medium);
            --_surface-color-inactive: var(--color-blue-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-blue-light);
            }
    }
    &.profile-pill--light-blue {
            --_surface-color: var(--color-light-blue-medium);
            --_surface-color-inactive: var(--color-light-blue-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-light-blue-light);
            }
    }
    &.profile-pill--cyan {
            --_surface-color: var(--color-cyan-medium);
            --_surface-color-inactive: var(--color-cyan-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-cyan-light);
            }
    }
    &.profile-pill--teal {
            --_surface-color: var(--color-teal-medium);
            --_surface-color-inactive: var(--color-teal-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-teal-light);
            }
    }
    &.profile-pill--green {
            --_surface-color: var(--color-green-medium);
            --_surface-color-inactive: var(--color-green-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-green-light);
            }
    }
    &.profile-pill--light-green {
            --_surface-color: var(--color-light-green-medium);
            --_surface-color-inactive: var(--color-light-green-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-light-green-light);
            }
    }
    &.profile-pill--lime {
            --_surface-color: var(--color-lime-medium);
            --_surface-color-inactive: var(--color-lime-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-lime-light);
            }
    }
    &.profile-pill--yellow {
            --_surface-color: var(--color-yellow-medium);
            --_surface-color-inactive: var(--color-yellow-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-yellow-light);
            }
    }
    &.profile-pill--amber {
            --_surface-color: var(--color-amber-medium);
            --_surface-color-inactive: var(--color-amber-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-amber-light);
            }
    }
    &.profile-pill--orange {
            --_surface-color: var(--color-orange-medium);
            --_surface-color-inactive: var(--color-orange-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-orange-light);
            }
    }
    &.profile-pill--deep-orange {
            --_surface-color: var(--color-deep-orange-medium);
            --_surface-color-inactive: var(--color-deep-orange-light);
            --_surface-color-text: var(--color-primary-1000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-deep-orange-light);
            }
    }
    &.profile-pill--brown {
            --_surface-color: var(--color-brown-medium);
            --_surface-color-inactive: var(--color-brown-light);
            --_surface-color-text: var(--color-primary-000);
            --_surface-color-badge: var(--color-orange-medium);

            &.profile-pill--disabled {
                --_surface-color: var(--color-brown-light);
            }
    }
}

.tour-manager-table {
    display: flex;
    flex-direction: column;
    gap: var(--container-md-gap);
}

.tour-manager-table__container {
    --_border-color: var(--border-color-separator);

    border: var(--border-width) solid var(--_border-color);
    border-radius: var(--component-md-radius);
    overflow-x: scroll;

    .tour-manager-table__table {
        /* table-layout: fixed;
        width: fit-content; */
        min-width: 100%;


        border-collapse: collapse;
        thead {
            border-radius: var(--component-md-radius) var(--component-md-radius) 0 0;
            background-color: var(--surface-color-hightlight);
        }
    }
    .tour-manager-table__table-cell {
        padding: var(--component-md-block) var(--component-md-inline);

        &.tour-manager-table__table-cell--end {
            text-align: end;
        }

        /* FIXME: just a tmp fix */
        input[type="number"] {
            width: 5ch;
        }
        .tour-manager-table__table-sortable {
            display: flex;
            flex-direction: row;
            appearance: none;
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            width: 100%;
            cursor: pointer;
            .tour-manager-table__table-sortable-text {
                flex-grow: 1;
                text-align: start;
            }
            svg {
                width: var(--icon-size-md);
            }
        }
    }
    thead .tour-manager-table__table-cell {
        font-weight: var(--text-weight-bold);
        padding: var(--component-md-inline) var(--component-md-inline);
        text-align: start;
    }
    tbody .tour-manager-table__table-cell {
        border-block-end: var(--border-width) solid var(--_border-color);
    }
    .tour-manager-table__table-row {

        --_row-suface-color: transparent;

        cursor: pointer;

        &.tour-manager-table__table-row--subrow {
                background-color: var(--surface-color-hightlight);
        }
        &.tour-manager-table__table-row--disabled {
                background-color: silver
        }
        .tour-manager-table__ref {
            display: block;
        }
        .tour-manager-table__id {
            display: block;
            font-size: var(--text-size-sm);
            color: var(--text-color-description);
        }
    }

    .tour-manager-table__subpanel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--container-md-gap);

        .tour-manager-table__subpanel-group {
            display: flex;
            flex-direction: column;
            gap: var(--container-md-gap);
        }
        .tour-manager-table__subpanel-one-column {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--container-md-gap);
        }

        .tour-manager-table__subpanel-two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--container-md-gap);
        }
    }
}

.pill-container {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--component-md-gap);

        background-color: var(--surface-color-hightlight);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--component-md-radius);
        padding: var(--component-md-block);
        min-height: 60px;

    .pill-container__list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: var(--component-sm-gap);
    }

    .pill-container__action {
        align-self: start;

        /* FIXME: this is a bit hacky */
        svg.icon {
            width: var(--text-size-md);
            height: auto;
        }
    }
}

.select-search-inline {
    display: flex;
    flex-direction: column;
    gap: var(--component-md-gap);
    border-radius: var(--component-md-radius);

    z-index: 1;


    margin: 0;

    animation:
        fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards;
    opacity: 0;

    --_shadow: 0 0 13px -4px rgb(0 0 0 / .5);
    border: none;
    box-shadow: var(--_shadow);
}

.tour-manager-item-display {
    display: grid;
    align-items: end;
    grid-template-columns: 1fr 2fr;
    gap: var(--container-md-gap);

    .tour-manager-item-display__description {
        display: flex;
        gap: var(--container-md-gap);
        flex-direction: column;
    }
    .tour-manager-item-display__header {
        display: flex;
        gap: var(--container-lg-gap);
        flex-direction: column;

        header {
                display: flex;
                flex-direction: column;
                gap: var(--component-sm-gap);
        }
    }
    .tour-manager-item-display__table {
        grid-column: 1 / -1;
    }

    .tour-manager-item-display__passengers-count {
        display: grid;
        grid-template-columns: 3fr 1fr 3fr 1fr;
        row-gap: var(--component-sm-gap);

        dt, dd {
            margin: 0;
            padding: 0;
        }
    }

    .tour-manager-item-display__pill-container {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: var(--component-sm-gap);

        background-color: var(--surface-color-hightlight);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--component-md-radius);
        padding: var(--component-md-block);
        min-height: 60px;
    }

    .tour-manager-item-display__resources {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--container-md-gap);
    }
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--spacing-60);
}


.tours-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
}

.tours-display__list {
    list-style: none;
    padding: 0;
}

.tours-display__category {
    position: relative;
}
.tours-display__category-title {
    position: sticky;
    top: 0;

    background-color: var(--color-primary-000);
    padding-block: var(--spacing-100);
    z-index: 1;
}
.tours-display__category-list {
    list-style: none;
}

.combo {
    position: relative;
}

.combo__component-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-60);
}

.combo__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.combo__item {
    border-inline-start: 4px solid transparent;
    cursor: pointer;

    &:hover {
        border-inline-start-color: var(--color-accent-500);

    }
}

.combo__dialog {
    width: 100%;
    padding: 0;
    margin: 0;
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-block: var(--spacing-60);
    z-index: 1;
}


/*  */

.multi-combo {
    position: relative;
}

.multi-combo__selection {
    padding: var(--spacing-60);
    background-color: var(--color-primary-100);
    border-radius: var(--radius-100);
    margin-block-end: var(--spacing-60);
}

.multi-combo__selection-list {
    list-style: none;
    padding: 0;
}

.multi-combo__selection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tour-group-item-display__title {
    background-color: var(--color-primary-100);
    border-block-end: var(--border);
    margin: calc(-1 * var(--spacing-800));
    margin-block-end: 0;
    padding-inline: var(--spacing-600);
    padding-block: var(--spacing-300);
}

.tour-group-item-display__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tour-group-item-display__grid {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tour-groups-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
}


/*
.tour-type-schedules__list {
    padding: 0;
}

.tour-type-schedules__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
} */



.tour-type-schedules__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--container-md-gap);
    margin-block: var(--container-lg-block);


    .tour-type-groups__list-item {
        display: flex;
        flex-direction: row;
        align-items: center;

        animation:
                fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
                scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
                slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards
            ;
            opacity: 0;
    }
}


.tour-type-sStatistics__charts {
    display: flex;
    justify-content: space-between;
}


.tour-type-pricing-spec-form__spec-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--container-md-gap);
    margin: 0;
    padding: 0;


    .tour-type-pricing-spec-form__spec-list-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--component-md-gap);

        .tour-type-pricing-spec-form__spec-list-item-title {
            grid-column: 1 / -1;
        }
    }
}

.price-select__list {
    display: flex;
    flex-direction: column;
    gap: var(--container-md-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tour-type-item-display__form {
    display: contents;
}

.tour-types-create-form {
    display: contents;
}



.price-item-display__form {
    display: contents;
}


.price-item-display__currency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-md-gap);

    .price-item-display__currency-grid-item {
        display: flex;
        flex-direction: column;
        gap: var(--component-md-gap);
    }
}

.price-item-display__currency-container {
    display: flex;
    flex-direction: column;
    gap: var(--container-md-gap);

    opacity: 0;

    animation:
        fade-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        scale-in var(--animation) calc(sibling-index() * 25ms) 1 forwards,
        slide-in var(--animation) calc(sibling-index() * 25ms) 1 forwards
    ;
}