@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 0;
        border-radius: var(--radius-button);
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
    }

    .btn--sm {
        min-height: 46px;
        padding-inline: 22px;
    }

    .btn--md {
        min-height: 50px;
        padding-inline: 24px;
    }

    .btn--lg {
        box-sizing: border-box;
        min-height: 54px;
        padding: 10px 26px;
        line-height: 1.3;
        text-align: center;
    }

    .btn--block {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .btn--primary {
        background: var(--color-accent);
        color: var(--color-white);
    }

    .btn--primary:hover {
        background: var(--color-accent-dark);
        color: var(--color-white);
    }

    .btn--outline,
    .btn--ghost-dark {
        box-sizing: border-box;
    }

    .btn--outline {
        border: 1.5px solid var(--color-ink);
        background: transparent;
        color: var(--color-ink);
    }

    .btn--outline:hover {
        background: var(--color-ink);
        color: var(--color-white);
    }

    .btn--outline.btn--md {
        padding-inline: 22px;
    }

    .btn--aqua {
        background: var(--color-aqua);
        color: var(--color-ink);
        font-weight: 600;
    }

    .btn--aqua:hover {
        background: var(--color-aqua-light);
        color: var(--color-ink);
    }

    .btn--ghost-dark {
        border: 1.5px solid var(--color-muted);
        background: transparent;
        color: var(--color-white);
    }

    .btn--ghost-dark:hover {
        border-color: var(--color-aqua);
        color: var(--color-white);
    }

    .btn--ghost-dark.btn--lg {
        padding-inline: 22px;
    }

    .btn--ghost-dark.btn--md {
        padding-inline: 20px;
    }

    .btn[aria-disabled="true"] {
        cursor: progress;
    }

    .btn svg {
        flex: none;
    }
}