@mixin button-default-variant() {
    color: var(--button-default-font-color);
    background-color: var(--button-default-background-color);
    border: var(--button-default-border);

    svg {
        color: var(--button-default-font-color);
    }

    &:hover,
    &:focus-visible {
        color: var(--button-default-hover-font-color);
        background-color: var(--button-default-hover-background-color);
        border: var(--button-default-hover-border);
    }
}

@mixin button-filled-variant() {
    color: var(--button-filled-font-color);
    background-color: var(--button-filled-background-color);
    border: var(--button-filled-border);

    svg {
        color: var(--button-filled-font-color);
    }

    &:hover,
    &:focus-visible {
        color: var(--button-filled-hover-font-color);
        background-color: var(--button-filled-hover-background-color);
        border: var(--button-filled-hover-border);
    }
}

@mixin button-danger-variant() {
    color: var(--button-danger-font-color);
    background-color: var(--button-danger-background-color);
    border: var(--button-danger-border);

    svg {
        color: var(--button-danger-font-color);
    }

    &:hover,
    &:focus-visible {
        color: var(--button-danger-hover-font-color);
        background-color: var(--button-danger-hover-background-color);
        border: var(--button-danger-hover-border);
    }
}

@mixin button-primary-variant() {
    color: var(--button-primary-font-color);
    background-color: var(--button-primary-background-color);
    border: var(--button-primary-border);

    svg {
        color: var(--button-primary-font-color);
    }

    &:hover,
    &:focus-visible {
        color: var(--button-primary-hover-font-color);
        background-color: var(--button-primary-hover-background-color);
        border: var(--button-primary-hover-border);
    }
}

@mixin button-subtle-variant() {
    color: var(--button-subtle-font-color);
    background-color: var(--button-subtle-background-color);
    border: var(--button-subtle-border);

    svg {
        color: var(--button-subtle-font-color);
    }

    &:hover,
    &:focus-visible {
        color: var(--button-subtle-hover-font-color);
        background-color: var(--button-subtle-hover-background-color);
        border: var(--button-subtle-hover-border);

        svg {
            color: var(--button-subtle-hover-font-color);
        }
    }
}

@mixin button-transparent-variant() {
    color: var(--button-default-font-color);
    background-color: transparent;
    border: 1px solid transparent;

    svg {
        color: var(--button-default-font-color);
    }

    &:hover,
    &:focus-visible {
        color: var(--button-default-hover-font-color);
        background-color: transparent;
        border: 1px solid transparent;
    }
}

@mixin button-outline-variant() {
    color: var(--button-outline-font-color);
    background-color: var(--button-outline-background-color);
    border: var(--button-outline-border);

    &:hover,
    &:focus-visible {
        color: var(--button-outline-hover-font-color);
        background-color: var(--button-outline-hover-background-color);
        border: var(--button-outline-hover-border);
    }
}

@mixin button-input-variant() {
    color: var(--input-font-color);
    background-color: var(--input-background-color);
    border: var(--input-border);

    &:hover,
    &:focus-visible {
        color: var(--input-hover-font-color);
        background-color: var(--input-hover-background-color);
        border: var(--input-hover-border);
    }
}

@mixin text-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin bottom-shadow() {
    box-shadow: 0 0 6px 3px rgba(0 0 0 / 20%);
}
