@layer components {
    .btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: flex-start;
        width: fit-content;
        height: fit-content;

        transition: all 0.15s;

        .btn-image svg {
            height: 100%;
            aspect-ratio: 1;
        }

        &.btn-md {
            font-size: var(--font-size-base);
            padding: var(--spacing-1) var(--spacing-4);
            border-radius: var(--radius-md);
            gap: var(--spacing-2);

            .btn-image {
                height: var(--font-size-base);
            }
        }

        &.btn-lg {
            font-size: var(--font-size-base);
            padding: var(--spacing-2) var(--spacing-6);
            border-radius: var(--radius-md);
            gap: var(--spacing-2);

            .btn-image {
                height: var(--font-size-xl);
            }
        }
    }

    .btn-prominent {
        color: var(--color-primary-constrast);
        background-color: var(--color-primary);

        .btn-label {
            color: var(--color-primary-constrast);
            font-weight: var(--font-weight-medium);
        }
        .btn-image {
            svg,
            path {
                fill: var(--color-primary-constrast);
            }
        }

        &:hover {
            background-color: var(--color-primary-hover);
            text-decoration: none;
        }
    }

    .btn-prominent-outline {
        background: none;
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
    }

    .btn-notice {
        color: var(--color-text);
        background-color: var(--apple-yellow);
        font-weight: var(--font-weight-medium);
        border-radius: var(--radius-full) !important;

        &:hover {
            background-color: color-mix(
                in oklab,
                var(--apple-yellow) 95%,
                var(--color-text) 5%
            );
            text-decoration: none;
        }
    }
}