@import 'vars.css';

button {
    all: unset;
    text-transform: uppercase;
    cursor: pointer;
}

    button:disabled {
        cursor: default;
        opacity: 0.2;
    }

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--border-radius-04);
    box-sizing: border-box;
    width: 100%;
    text-transform: uppercase;
}

.btn.auto {
    width: fit-content;
}

    /* SIZES */

    .btn.btn-small {
        height: 28px;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-extra-bold);
        line-height: 17px;
    }

    .btn.btn-medium {
        height: 40px;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
        font-size: var(--font-size-h5);
        font-weight: var(--font-weight-extra-bold);
        line-height: 20px;
    }

    /* COLORS */

    .btn.btn-primary {
        border: 0.5px solid var(--marine-8);
        background: var(--marine-8);
        color: var(--white);
    }

        .btn.btn-primary.active {
            border: 1px solid var(--white);
            box-shadow: var(--elevation-3);
        }

        .btn.btn-primary:focus-visible {
            outline: 1px solid var(--marine-10);
            background: var(--marine-7);
        }

    .btn.btn-secondary {
        border: 1px solid var(--grey-3);
        background: var(--white);
        color: var(--grey-9);
    }

        .btn.btn-secondary.active {
            border: 1px solid var(--white);
            background: var(--grey-2);
        }

        .btn.btn-secondary:focus-visible {
            outline: 1px solid var(--grey-12);
            background: var(--grey-2);
        }

    .btn.btn-destructive {
        border: 0.5px solid var(--red-6);
        background: var(--red-6);
        color: var(--white);
    }

        .btn.btn-destructive.active {
            border: 1px solid var(--white);
            box-shadow: var(--elevation-3);
        }

        .btn.btn-destructive:focus-visible {
            outline: 1px solid var(--red-7);
            background: var(--red-5);
        }

        .btn.btn-large {
            height: 53px;
            padding: var(--space-4) var(--space-6);
            gap: var(--space-2);
            font-size: var(--font-size-h3);
            font-weight: var(--font-weight-extra-bold);
            line-height: 22px;
        }