@use "../mixins" as *;
@use "../media" as *;

.button {
    @include flex-center(center, true);
    @include reset-button;

    height: var(--button-height);
    border-radius: var(--border-radius-15);
    background-color: var(--color-accent);
    color: var(--color-stable-dark);
    font-size: 20px;
    padding-inline: 30px;
    user-select: none;
    cursor: pointer;
    transition: background-color var(--transition-duration-03), color var(--transition-duration-02);

    @include hover {
        background-color: var(--color-accent-80-no-alpha);
        color: var(--color-stable-dark);
    }

    &--gray {
        background-color: var(--color-light-accent);
        color: var(--color-dark);

        @include hover {
            background-color: var(--color-light-accent-2);
            color: var(--color-dark);
        }
    }

    &--large {
        height: var(--button-height-l);
        width: 100%;
    }

    &--large-gray {
        height: var(--button-height-l);
        width: 100%;
        background-color: var(--color-light-accent-2);
        color: var(--color-dark);
    }
}