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

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

    :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;
    }
}

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

.mode-solid {
    background-color: var(--uui-btn-bg);
    color: var(--uui-btn-caption);
    fill: var(--uui-btn-caption);
    border-color: var(--uui-btn-bg);

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

        &:focus {
            background-color: var(--uui-btn-bg-hover);
            border-color: var(--uui-btn-bg-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-bg-active);
        }
    }

    &: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));
        }
    }
}

.mode-outline {
    background-color: var(--uui-button-bg-halftone);
    color: var(--uui-btn-caption-halftone);
    fill: var(--uui-btn-caption-halftone);
    border-color: var(--uui-btn-border);

    &:global(.-clickable) {
        &:hover, &:focus {
            background-color: var(--uui-btn-bg-halftone-hover);
            color: var(--uui-btn-caption-halftone);
            fill: var(--uui-btn-caption-halftone);
            border-color: var(--uui-btn-border);
        }

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

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

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

.mode-none {
    background-color: transparent;
    color: var(--uui-btn-caption-halftone);
    fill: var(--uui-btn-caption-halftone);
    border-color: var(--uui-btn-border);

    &:global(.-clickable) {
        &:hover, &:focus {
            background-color: var(--uui-btn-bg-halftone-hover);
            color: var(--uui-btn-caption-halftone);
            fill: var(--uui-btn-caption-halftone);
            border-color: var(--uui-btn-border);
        }

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

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

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

.mode-ghost {
    background-color: transparent;
    color: var(--uui-btn-caption-halftone);
    fill: var(--uui-btn-caption-halftone);
    border-color: transparent;

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

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


    &:global(.uui-disabled) {
        @include button-disables-styles(transparent, transparent);
    }


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

//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);
    }
}
