@use '../variables';
@use 'border-radius';
@use 'box-shadow';
@use 'gradients';
@use 'hover';

// Button variants
@mixin dg-button-variant(
    $background,
    $border,
    $hover-background: $background,
    $hover-border: $border,
    $active-background: $background,
    $active-border: $border
) {
    color: variables.$dg-white;
    @include gradients.dg-gradient-bg($background);
    border-color: $border;
    @include box-shadow.dg-box-shadow(variables.$dg-btn-box-shadow);

    @include hover.hover() {
        color: variables.$dg-white;
        @include gradients.dg-gradient-bg($hover-background);
        border-color: $hover-border;
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
        color: color-yiq($background);
        background-color: $background;
        border-color: $border;
        // Remove CSS gradients if they're enabled
        @if variables.$dg-enable-gradients {
            background-image: none;
        }
    }
}

@mixin dg-button-outline-variant($color, $color-hover: color-yiq($color), $active-border: $color, $btn-focus-width: 0px) {
    color: $color;
    border-color: $color;

    @include hover.hover() {
        color: $color-hover;
        border-color: $active-border;
    }

    &:focus,
    &.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
    }

    &.disabled,
    &:disabled {
        color: $color;
        background-color: transparent;
    }
}

// Button sizes
@mixin dg-button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
    padding: $padding-y $padding-x;
    font-size: $font-size;
    line-height: $line-height;
    // Manually declare to provide an override to the browser default
    @include border-radius.dg-border-radius($border-radius, 0);
}

@mixin dg-button-radius-variant($border-radius) {
    border-radius: $border-radius;
}