@use 'sass:math';

@mixin button-variant(
    $color,
    $color-hover,
    $background,
    $bg-hover-or-active,
    $border: transparent,
    $border-hover: transparent
) {
    color: $color;
    background-color: $background;
    border-color: $border;

    &:hover,
    &:active,
    &.active {
        color: $color-hover;
        background-color: $bg-hover-or-active;
        border-color: $border-hover;

        &.btn-carousel:before {
            border-color: $color-hover;
        }
    }
    // Override active button state for dropdown toggles
    &[aria-expanded='true'] {
        color: $color-hover;
        background-color: $bg-hover-or-active;
        border-color: $border-hover;
        box-shadow: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &:hover,
        &:focus,
        &.focus {
            color: $color;
            background-color: $background;
            border-color: $border;

            &.btn-close {
                &:before,
                &:after {
                    background-color: $color;
                }
            }
            &.btn-carousel:before {
                border-color: $color;
            }
        }
    }
    .badge {
        color: $background;
        background-color: $color;
    }
}

// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
}

@mixin button-round($font-size, $line-height, $padding-vertical) {
    @include button-square($font-size, $line-height, $padding-vertical);
    font-size: $font-size * 1.2;
    font-weight: 100;
    border-radius: 50%;
}

@mixin button-square($font-size, $line-height, $padding-vertical) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    width: math.floor($font-size * $line-height) + ($padding-vertical * 2) + 1 + 1;
    height: math.floor($font-size * $line-height) + ($padding-vertical * 2) + 1 + 1;
}

@mixin button-close($font-size, $line-height, $padding-vertical) {
    @include button-square($font-size, $line-height, $padding-vertical);

    // ref: https://fontawesome.com/docs/web/add-icons/pseudo-elements
    &:before {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: '\f00d';
        line-height: 1;
        font: var(--fa-font-light);
        font-size: 1.3em;
    }
}