@use '../../assets/styles/index' as *;

@mixin button-disables-styles($bg-color, $border-color) {
    background-color: $bg-color;
    color: var(--uui-btn-caption-disabled);
    fill: var(--uui-btn-caption-disabled);
    border-color: $border-color;
}

.root {
    --uui-btn-bg: var(--uui-color-50);
    --uui-btn-bg-hover: var(--uui-color-60);
    --uui-btn-bg-active: var(--uui-color-70);
    --uui-btn-bg-disabled: var(--uui-disabled);
    --uui-btn-border: var(--uui-color-50);
    --uui-btn-border-hover: var(--uui-color-60);
    --uui-btn-border-active: var(--uui-color-70);
    --uui-btn-border-disabled: var(--uui-disabled);
    --uui-btn-caption: var(--uui-color-contrast-text);
    --uui-btn-caption-disabled: var(--uui-text-disabled);

    --uui-btn-border-radius: var(--uui-border-radius);

    --uui-btn-font: var(--font-semibold);
    //
    background-color: var(--uui-btn-bg);
    color: var(--uui-btn-caption);
    fill: var(--uui-btn-caption);
    border-color: var(--uui-btn-border);

    &:global(.-clickable) {
        &:hover {
            background-color: var(--uui-btn-bg-hover);
            border-color: var(--uui-btn-border-hover);
        }

        &:focus {
            background-color: var(--uui-btn-bg-hover);
            border-color: var(--uui-btn-border-hover);
            box-shadow: var(--uui-btn-focus-shadow);
            outline: var(--uui-btn-focus-outline);
        }

        &:active {
            background-color: var(--uui-btn-bg-active);
            border-color: var(--uui-btn-border-active);
        }
    }

    &:global(.uui-button-box) {
        border-style: solid;
        justify-content: center;
        border-radius: var(--uui-btn-border-radius);
    }

    &:focus-visible {
        @include focus-visible-effect();
    }

    :global(.uui-caption) {
        @include overflow-ellipsis();
        min-width: 0;
        text-align: center;
        flex: 1 1 auto;
        font-family: var(--uui-btn-font);
        font-weight: var(--uui-btn-font-weight, normal);
        user-select: none;
    }

    &:global(.uui-disabled) {
        @include button-disables-styles(var(--uui-btn-bg-disabled), var(--uui-btn-border-disabled));
    }

    &:global(.-clickable), &:hover, &:active, &:focus {
        &:global(.uui-disabled) {
            @include button-disables-styles(var(--uui-btn-bg-disabled), var(--uui-btn-border-disabled));
        }
    }

    &:global(.uui-fill-solid) {
        --uui-btn-bg: var(--uui-color-50);
        --uui-btn-bg-hover: var(--uui-color-60);
        --uui-btn-bg-active: var(--uui-color-70);
        --uui-btn-bg-disabled: var(--uui-disabled);
        --uui-btn-border: var(--uui-color-50);
        --uui-btn-border-hover: var(--uui-color-60);
        --uui-btn-border-active: var(--uui-color-70);
        --uui-btn-border-disabled: var(--uui-disabled);
        --uui-btn-caption: var(--uui-color-contrast-text);
        --uui-btn-caption-disabled: var(--uui-text-disabled);
    }

    &:global(.uui-fill-outline) {
        --uui-btn-bg: var(--uui-surface);
        --uui-btn-bg-hover: var(--uui-color-10);
        --uui-btn-bg-active: var(--uui-color-20);
        --uui-btn-bg-disabled: var(--uui-disabled);
        --uui-btn-border: var(--uui-color-50);
        --uui-btn-border-hover: var(--uui-color-50);
        --uui-btn-border-active: var(--uui-color-50);
        --uui-btn-border-disabled: var(--uui-disabled);
        --uui-btn-caption: var(--uui-color-text);
        --uui-btn-caption-disabled: var(--uui-text-disabled);
    }

    &:global(.uui-fill-none) {
        --uui-btn-bg: transparent;
        --uui-btn-bg-hover: var(--uui-color-10);
        --uui-btn-bg-active: var(--uui-color-20);
        --uui-btn-bg-disabled: var(--uui-disabled);
        --uui-btn-border: var(--uui-color-50);
        --uui-btn-border-hover: var(--uui-color-50);
        --uui-btn-border-active: var(--uui-color-50);
        --uui-btn-border-disabled: var(--uui-disabled);
        --uui-btn-caption: var(--uui-color-text);
        --uui-btn-caption-disabled: var(--uui-text-disabled);
    }

    &:global(.uui-fill-ghost) {
        --uui-btn-bg: transparent;
        --uui-btn-bg-hover: var(--uui-color-10);
        --uui-btn-bg-active: var(--uui-color-20);
        --uui-btn-bg-disabled: var(--uui-disabled);
        --uui-btn-border: transparent;
        --uui-btn-border-hover: var(--uui-color-10);
        --uui-btn-border-active: var(--uui-color-20);
        --uui-btn-border-disabled: var(--uui-disabled);
        --uui-btn-caption: var(--uui-color-text);
        --uui-btn-caption-disabled: var(--uui-text-disabled);
    }
}

//Sizes
.size-18 {
    @include button-layout(18px, 1px);
}

.size-24 {
    @include button-layout(24px, 1px);
}

.size-30 {
    @include button-layout(30px, 1px);
}

.size-36 {
    @include button-layout(36px, 1px);
}

.size-42 {
    @include button-layout(42px, 1px);

    :global(.uui-caption) {
        font-family: var(--font-primary);
    }
}

.size-48 {
    @include button-layout(48px, 1px);

    :global(.uui-caption) {
        font-family: var(--font-primary);
    }
}
