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

.root {
    &: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, &:focus {
                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;
            }
        }

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