@layer components {

    /* Buttons and button-like hover affordances */
    .u-button-hover-line {
        transition-property: border-color, background-color, box-shadow, color, opacity, transform;
        transition-duration: 0.2s;
        transition-timing-function: ease;
    }

    .u-button-hover-line:where(:not(:disabled):not(.disabled):not(.is-disabled):not(.show):not(.is-reported):not([data-selected="true"]):not([aria-current="true"]):not([aria-expanded="true"])):where(:hover, :focus-visible),
    .u-button-hover-line:where(:not(:disabled):not(.disabled):not(.is-disabled)):where([data-state="open"]),
    .u-button-hover-line--hover-only:where(:not(:disabled):not(.disabled):not(.is-disabled)):where(:hover, :focus-visible) {
        border-bottom-color: var(--button-hover-line-color);
        box-shadow: inset 0 var(--button-hover-line-offset) 0 var(--button-hover-line-color), var(--button-hover-line-shadow, 0 0 transparent);
    }

    .u-menu__option[data-variant="danger"],
    .u-menu__option[data-variant="danger"]:hover,
    .u-menu__option[data-variant="danger"]:focus-visible {
        color: var(--color-danger-static);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--btn-gap);
        min-height: var(--btn-height);
        padding: 0 var(--btn-padding-x);
        border: var(--btn-border-width) solid transparent;
        border-radius: var(--radius-corner);
        background: transparent;
        color: inherit;
        font-size: var(--text-sm);
        font-weight: var(--btn-font-weight);
        line-height: var(--btn-line-height);
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        white-space: nowrap;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        user-select: none;
        transition: var(--btn-transition);

        &:focus-visible {
            outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring);
            outline-offset: var(--btn-focus-ring-offset);
        }

        &:disabled,
        &.disabled,
        &.is-disabled {
            border-color: var(--btn-disabled-border);
            background: var(--btn-disabled-bg);
            color: var(--btn-disabled-text);
            cursor: not-allowed;
            pointer-events: none;
        }

    }

    .btn__label {
        display: inline-flex;
        min-height: var(--btn-icon-size);
        align-items: center;
        color: inherit;
        line-height: var(--btn-line-height);
    }

    .btn__icon--up {
        transform: rotate(180deg);
    }

    .btn--text {
        gap: 0;
    }

    .btn--icon-text {
        gap: var(--btn-gap);
        padding-right: var(--space-18);
        padding-left: var(--space-14);
    }

    .btn--icon-only {
        width: var(--btn-icon-only-size);
        min-width: var(--btn-icon-only-size);
        height: var(--btn-icon-only-size);
        min-height: var(--btn-icon-only-size);
        padding: 0;
    }

    .btn--full {
        width: 100%;
    }

    .btn--auto {
        width: auto;
    }

    .btn--primary {
        border-color: var(--btn-primary-border);
        background: var(--btn-primary-bg);
        color: var(--btn-primary-text);

        &:hover,
        &:focus-visible {
            border-color: var(--btn-primary-hover-border);
            background: var(--btn-primary-hover-bg);
            color: var(--btn-primary-hover-text);
        }
    }

    .btn--secondary {
        border-color: var(--btn-secondary-border);
        background: var(--btn-secondary-bg);
        color: var(--btn-secondary-text);

        &:hover,
        &:focus-visible {
            border-color: var(--btn-secondary-hover-border);
            background: var(--btn-secondary-hover-bg);
            color: var(--btn-secondary-hover-text);
        }
    }

    .btn--ghost {
        border-color: var(--btn-ghost-border);
        background: var(--btn-ghost-bg);
        color: var(--btn-ghost-text);

        &:hover,
        &:focus-visible {
            border-color: var(--btn-ghost-hover-border);
            background: var(--btn-ghost-hover-bg);
            color: var(--btn-ghost-hover-text);
        }
    }

    .btn--danger {
        border-color: var(--btn-danger-border);
        background: var(--btn-danger-bg);
        color: var(--btn-danger-text);

        &:hover,
        &:focus-visible {
            border-color: var(--btn-danger-hover-border);
            background: var(--btn-danger-hover-bg);
            color: var(--btn-danger-hover-text);
        }

    }
}