@use 'sass:color';

.button {
    @extend %label-md;
    display: block;
    padding: 16dp 20dp;
    background-color: rgba($color-primary-d, 0.8);
    color: $color-text;
    border-radius: $border-radius-md;
    width: auto;
    height: auto;

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

    &:focus {
        // color: $color-primary-l;
        background-color: $color-primary-d;
    }

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

    &:active {
        background-color: color.scale($color-primary-d, $lightness: -10%);
        color: color.scale($color-text, $lightness: 20%);
    }

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