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

.root {
    --uui-labeled-input: var(--uui-text-primary);
    --uui-labeled-input-disabled: var(--uui-text-disabled);
    --uui-labeled-input-error: var(--uui-error-50);
    --uui-labeled-input-fill: var(--uui-icon);
    --uui-labeled-input-info-fill: var(--uui-icon);
    --uui-labeled-input-optional-text: var(--uui-text-tertiary);
    --uui-labeled-input-asterisk: var(--uui-error-50);

    --uui-labeled-input-font: var(--font-semibold);
    --uui-labeled-input-optional-font: var(--font-italic);
    --uui-labeled-input-invalid-msg-font: var(--font-regular);
    //
    width: 100%;

    :global(.uui-label) {
        @include overflow-ellipsis();
        font-family: var(--uui-labeled-input-font);
        font-weight: var(--uui-labeled-input-font-weight, normal);
        color: var(--uui-labeled-input);

        :global(.uui-labeled-input-info-icon) {
            flex-shrink: 0;
            margin: 0 4px;
            fill: var(--uui-labeled-input-info-fill);
        }

        :global(.uui-labeled-input-asterisk) {
            color: var(--uui-labeled-input-asterisk);
        }

        :global(.uui-labeled-input-optional) {
            font-family: var(--uui-labeled-input-optional-font);
            font-weight: var(--uui-labeled-input-optional-font-weight, normal);
            font-size: 12px;
            line-height: 18px;
            color: var(--uui-labeled-input-optional-text);
        }
    }

    :global(.uui-label-left) {
        > :global(.uui-label) {
            margin-right: 5px;
        }
    }

    :global(.uui-invalid-message) {
        line-height: 18px;
        font-size: 12px;
        color: var(--uui-labeled-input-error);
        font-family: var(--uui-labeled-input-invalid-msg-font);
        font-weight: var(--uui-labeled-input-invalid-msg-font-weight, normal);
        margin-top: 3px;
    }

    // Sizes
    &.size-24 {
        :global(.uui-label-top) {
            > :global(.uui-label) {
                margin-bottom: 6px;
            }
        }

        :global(.uui-label) {
            font-size: 12px;
            line-height: 18px;
        }
    }

    &.size-30 {
        :global(.uui-label-top) {
            > :global(.uui-label) {
                margin-bottom: 6px;
            }
        }

        :global(.uui-label) {
            font-size: 12px;
            line-height: 18px;
        }
    }

    &.size-36 {
        :global(.uui-label-top) {
            > :global(.uui-label) {
                margin-bottom: 6px;
            }
        }

        :global(.uui-label) {
            font-size: 14px;
            line-height: 18px;
        }
    }

    &.size-42 {
        :global(.uui-label-top) {
            > :global(.uui-label) {
                margin-bottom: 6px;
            }
        }

        :global(.uui-label) {
            font-size: 14px;
            line-height: 18px;
        }
    }

    &.size-48 {
        :global(.uui-label-top) {
            > :global(.uui-label) {
                margin-bottom: 6px;
            }
        }

        :global(.uui-label) {
            font-size: 14px;
            line-height: 18px;
        }
    }
}
