@use 'sass:color';

@mixin create-button-variation($base-col) {
    background-color: rgba($base-col, 0.05);
    color: $color-text-dim;
    border-color: rgba($base-col, 0.8);

    &:focus {
        color: $color-text;
        border-color: $base-col;
        background-color: rgba($base-col, 0.3);
    }

    &:disabled,&[disabled] {
        color: $color-text-inactive;
    }

    &:active {
        background-color: rgba($base-col, 0.2);
        color: color.scale($color-text, $lightness: 20%);
    }
}

.button {
    @extend %label-lg;
    @include create-button-variation($color-primary);

    display: block;
    // leave 1dp room for border expansion
    padding: space(24 - 1);

    border-radius: $border-radius-md;
    border-width: space(1);
    width: auto;
    height: auto;

    // Setting it by default for convenience
    // &--primary {
    //     @include create-button-variation($color-primary);
    // }

    &--secondary {
        @include create-button-variation($color-secondary);
    }

    &--tertiary {
        @include create-button-variation($color-text);
    }

    &--success {
        @include create-button-variation($color-success);
    }

    &--error {
        @include create-button-variation($color-error);
    }

    &--warning {
        @include create-button-variation($color-warning);
    }

    &:not([disabled]) {
        @extend %nav-all;
    }

    &:disabled,&[disabled] {
        opacity: 0.5;
    }

    &__label {
        width: auto;
        height: auto;
    }
}