/* Base resets */

.btn {
    font-size: inherit;
    font-family: inherit;
    line-height: 1.5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    appearance: none;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    box-shadow: none;

    /* Override browser default. */
    color: var(--color-fg-default);
    transition: color linear 0.1s, background-color linear 0.1s, opacity linear 0.1s;
}
.btn:disabled, .btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn:focus-visible {
    outline: 2px solid var(--gray-5);
}


/* Variants */

.btn--primary {
    color: white;
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--border-radius-md);
    font-weight: bold;
    font-size: var(--fs-f4);
    font-family: var(--ff-primary);
}
.btn--primary:hover:not(:disabled) {
    color: var(--color-primary-light);
    background-color: white;
}

.btn--secondary {
    color: var(--color-primary-light);
    background-color: var(--color-bg-default);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--border-radius-md);
    font-weight: bold;
    font-size: var(--fs-f4);
    font-family: var(--ff-primary);
}
.btn--secondary:hover:not(:disabled) {
    color: white;
    background-color: var(--color-primary-light);
    font-weight: bold;
}
.btn--secondary.is-toggled {
    color: white;
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary-light);
}

.btn--tertiary {
    color: var(--color-fg-default);
    background-color: var(--color-bg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--fs-f4);
    font-family: var(--ff-primary);
}
.btn--tertiary:hover {
    color: var(--color-fg-default);
    background-color: var(--gray-1);
}

.btn--clear {
    border-radius: var(--border-radius-md);
}
.btn--clear:hover:not(:disabled) {
    color: var(--color-fg-muted);
}

.btn--icon, .btn--icon-outlined {
    border-radius: var(--border-radius-lg);
}
.btn--icon:hover:not(:disabled), .btn--icon-outlined:hover:not(:disabled) {
    background-color: rgba(var(--gray-3-rgb), 0.25);
}
.btn--icon-outlined {
    border: 1px solid var(--color-border-default);
}


/* Sizing */

:root {
    --btn-sm-padding: var(--space-2);
    --btn-sm-height: var(--space-6);
    --btn-md-padding: var(--space-3);
    --btn-md-height: var(--space-8);
    --btn-lg-padding: var(--space-4);
    --btn-lg-height: var(--space-10);
}
.btn--md, .btn--primary, .btn--secondary, .btn--tertiary {
    padding: 0 var(--btn-px, var(--btn-md-padding));
    min-height: var(--btn-md-height);
}
.btn--sm {
    padding: 0 var(--btn-px, var(--btn-sm-padding));
    min-height: var(--btn-sm-height);
    font-size: var(--fs-f5);
}
.btn--lg {
    padding: 0 var(--btn-px, var(--btn-lg-padding));
    min-height: var(--btn-lg-height);
    font-size: var(--fs-f4);
}
.btn--xl {
    padding: 0 var(--btn-px, var(--space-6));
    min-height: var(--space-12);
    font-size: var(--fs-h4);
}
.btn.btn--sm r-icon, r-button[size="sm"] r-icon {
    width: var(--space-4);
    height: var(--space-4);
}
.btn r-icon, r-button r-icon {
    width: var(--space-6);
    height: var(--space-6);
}
.btn.btn--lg r-icon, r-button[size="lg"] r-icon {
    width: var(--space-6);
    height: var(--space-6);
}
.btn.btn--xl r-icon, r-button[size="xl"] r-icon {
    width: var(--space-8);
    height: var(--space-8);
}
.btn--icon, .btn--icon-outlined {
    min-width: var(--btn-md-height);
    padding: 0;
}
.btn--icon.btn--lg, .btn--icon-outlined.btn--lg {
    min-width: var(--btn-lg-height);
}
.btn--icon.btn--sm, .btn--icon-outlined.btn--sm {
    min-width: var(--btn-sm-height);
}