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

.root {
    --uui-link_button-text: var(--uui-color-50);
    --uui-link_button-text-hover: var(--uui-color-60);
    --uui-link_button-text-active: var(--uui-color-70);
    --uui-link_button-text-disabled: var(--uui-text-disabled);

    --uui-link-button-font: var(--font-semibold);

    &:global(.uui-button-box) {
        background-color: transparent;
        color: var(--uui-link_button-text);
        fill: var(--uui-link_button-text);

        &:global(.-clickable:not(.uui-disabled)) {
            &:hover {
                color: var(--uui-link_button-text-hover);
                fill: var(--uui-link_button-text-hover);
            }

            &:active {
                color: var(--uui-link_button-text-active);
                fill: var(--uui-link_button-text-active);
            }

            &:focus {
                box-shadow: none;
            }

            &:focus-visible {
                border-radius: 2px;
                box-shadow:
                    inset 0 -2px 0 0 var(--uui-control-focus),
                    inset 0 2px 0 0 var(--uui-control-focus),
                    2px 0 0 0 var(--uui-control-focus),
                    -2px 0 0 0 var(--uui-control-focus);
            }
        }

        &:global(.uui-disabled) {
            color: var(--uui-link_button-text-disabled);
            fill: var(--uui-link_button-text-disabled);
            background-color: transparent;

            &:hover {
                background-color: transparent;
            }
        }
    }

    :global(.uui-caption) {
        font-family: var(--uui-link-button-font);
        font-weight: var(--uui-link-button-font-weight, normal);
    }

    // Sizes
    &.size-18 {
        @include link-button-layout(18px);
        min-width: auto;
    }

    &.size-24 {
        @include link-button-layout(24px);
        min-width: auto;
    }

    &.size-30 {
        @include link-button-layout(30px);
        min-width: auto;
    }

    &.size-36 {
        @include link-button-layout(36px);
        min-width: auto;
    }

    &.size-42 {
        @include link-button-layout(42px);
        min-width: auto;

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

    &.size-48 {
        @include link-button-layout(48px);
        min-width: auto;

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