@use '../styles/fonts';
@use '../config' as *;


.aui-button {
    height: var(--input-size);
    border-radius: var(--button-border-radius);
    padding: 0 15px;

    cursor: pointer;

    // @extend %fw-500 !optional;
    @extend #{$button-font-weight};
    background-color: var(--btn-bg-blu);
    color: var(--btn-fg-blu);

    &:hover {
        background-color: var(--btn-bg-blu-tnt);
    }

    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    gap: 5px;

    user-select: none;

    svg {
        height: 75%;
    }

    &.disabled {
        filter: saturate(50%) brightness(70%) opacity(50%);
        cursor: not-allowed;
        pointer-events: none;
    }
}

.aui-button-success {
    @extend .aui-button;
    background-color: var(--btn-bg-gre);
    color: var(--btn-fg-gre);

    &:hover {
        background-color: var(--btn-bg-gre-tnt);
    }
}

.aui-button-danger {
    @extend .aui-button;
    background-color: var(--btn-bg-red);
    color: var(--btn-fg-red);

    &:hover {
        background-color: var(--btn-bg-red-tnt);
    }
}

.aui-button-warning {
    @extend .aui-button;
    background-color: var(--btn-bg-yel);
    color: var(--btn-fg-yel);

    &:hover {
        background-color: var(--btn-bg-yel-tnt);
    }
}

.aui-button[disabled] {
    pointer-events: none;
    filter: grayscale(50%) saturate(50%) opacity(50%);
}