button,
.button {
    display: inline-block;
    padding: var(--space-small) var(--space-medium);

    color: currentcolor;
    font-family: inherit;
    font-size: var(--size-normal);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;

    background-color: transparent;
    border: 1px solid currentcolor;
    border-radius: var(--radius-button);

    transition:
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;

    cursor: pointer;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
    background-color: rgb(0 0 0 / 5%);
    border-color: currentcolor;
}

button[disabled],
.button[disabled] {
    color: var(--color-text-disabled);

    background-color: var(--color-grey-1);
    border-color: currentcolor;

    cursor: not-allowed;
    filter: grayscale(.6) opacity(.7);
}

.button--primary {
    color: var(--color-gable);

    background-color: var(--color-caribbean);
    border: none;
}

.button--primary:hover {
    background-color: var(--color-topaz);
}

.button--primary:focus {
    background-color: var(--color-caribbean);
}

.button--primary[disabled] {
    color: var(--color-gable);

    background-color: var(--color-caribbean);
}

.button--ghost {
    background-color: transparent;
    border-color: transparent;
}

.button--ghost:hover {
    background-color: transparent;
    border-color: var(--color-grey-border-hover);
}

.button--ghost:focus {
    background-color: transparent;
}

.button--ghost[disabled] {
    color: var(--color-text-disabled);

    background-color: transparent;
    border-color: var(--color-border-disabled);
}

.button--danger,
.button--danger[disabled] {
    --outline-color: var(--color-danger-solid);

    color: var(--color-white);

    background-color: var(--color-danger-solid);
    border-color: transparent;
}

.button--danger:hover,
.button--danger:focus {
    background-color: var(--color-danger-solid-hover);
    border-color: transparent;
}

.button--large {
    padding-right: var(--space-large);
    padding-left: var(--space-large);

    font-size: var(--size-large);
}

.button--small {
    padding: var(--space-smaller) var(--space-medium);
}

.button--smaller {
    padding: var(--space-smaller);

    line-height: 1.3;
}

.button--icon {
    padding: var(--space-smaller);

    border-radius: 100%;

    aspect-ratio: 1;
}
