.button {
    padding: var(--space-xs);
    background-color: var(--color-control-soft);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    transition: background-color 0.4s, color 0.4s;
    height: max-content;
    width: max-content;
    font-weight: var(--font-semibold);

    &:hover {
        background-color: var(--color-primary-soft);
        color: var(--color-primary-emphasis);
    }

    &:disabled {
        pointer-events: none;
        background-color: var(--color-disabled);
        border-color: var(--color-disabled);
        color: var(--color-disabled-text);
    }

    & .icon {
        width: var(--size-lg);
        height: var(--size-lg);
    }
}

.icon-button {        
    display: grid;
    place-content: center;

    &[data-simple] {
        background: none;
        border: none;
        padding: 0;

        .icon {
            width: var(--size-xl);
            height: var(--size-xl);
        }
    }
}

.text-button {
    padding-inline: var(--space-md);
}

.icon-text-button {
    display: grid;
    column-gap: var(--space-xs);
    grid-template-columns: max-content max-content;
    place-content: center;
    align-items: center;
    padding-inline: var(--space-md);
}