/* smart-numeric-text-box */

smart-numeric-text-box {
    width: var(--smart-numeric-text-box-default-width);
    height: var(--smart-numeric-text-box-default-height);
}

    smart-numeric-text-box.smart-element {
        overflow: visible;
        border: none;
        background: transparent;
    }

.smart-numeric-text-box * {
    box-sizing: border-box;
}

smart-numeric-text-box .smart-container,
.smart-numeric-text-box.smart-container {
    display: flex;
    border: none;
}

.smart-numeric-text-box .smart-spin-button.smart-element {
    display: block;
    min-height: 0;
    border-radius: 0px;
    background: var(--smart-surface);
}

smart-numeric-text-box .smart-container,
.smart-numeric-text-box.smart-container,
.smart-numeric-text-box input.smart-input,
.smart-numeric-text-box .smart-spin-button,
.smart-numeric-text-box .smart-numeric-text-box-drop-down {
    width: 100%;
}

.smart-numeric-text-box .smart-container,
.smart-numeric-text-box.smart-container,
.smart-numeric-text-box input.smart-input {
    height: 100%;
}

.smart-numeric-text-box .smart-container,
.smart-numeric-text-box.smart-container,
.smart-arrow {
    position: relative;
}

.smart-numeric-text-box-radix-display,
.smart-numeric-text-box-unit-display {
    display: flex;
    align-items: center;
    cursor: default;
}

.smart-numeric-text-box[radix-display-position="right"]:not([spin-buttons]) .smart-numeric-text-box-radix-display,
.smart-numeric-text-box[radix-display-position="right"][spin-buttons][spin-buttons-position="left"] .smart-numeric-text-box-radix-display {
    border-left-width: 0;
    border-right-width: var(--smart-border-width);
}

.smart-numeric-text-box .smart-spin-button,
.smart-numeric-text-box-radix-display,
.smart-numeric-text-box-drop-down {
    background-color: var(--smart-surface);
}

    .smart-numeric-text-box[drop-down-enabled] .smart-numeric-text-box-radix-display[hover],
    .smart-numeric-text-box-drop-down .smart-list-item[hover] {
        background-color: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
    }

    .smart-numeric-text-box[drop-down-enabled] .smart-numeric-text-box-radix-display,
    .smart-numeric-text-box-drop-down .smart-list-item {
        cursor: pointer;
    }

.smart-numeric-text-box[disabled],
.smart-numeric-text-box[value="null"] .smart-numeric-text-box-radix-display,
.smart-numeric-text-box[value="NaN"] .smart-spin-buttons-container,
.smart-numeric-text-box[value="Infinity"] .smart-spin-buttons-container,
.smart-numeric-text-box[value="-Infinity"] .smart-spin-buttons-container {
    opacity: 0.55;
    cursor: default;
}


.smart-numeric-text-box,
.smart-numeric-text-box input.smart-input,
.smart-numeric-text-box .smart-input-addon,
.smart-numeric-text-box .smart-spin-button {
    border-color: var(--smart-border);
    border-width: 1px;
    border-style: solid;
}

    .smart-numeric-text-box .smart-numeric-text-box-component {
        border-width: var(--smart-border-width);
        border-style: solid;
        border-color: var(--smart-border);
        border-left-width: var(--smart-border-width);
        border-right-width: 0;
    }

    .smart-numeric-text-box:focus,
    .smart-numeric-text-box[focus] input.smart-input,
    .smart-numeric-text-box[focus] .smart-input-addon,
    .smart-numeric-text-box[focus] .smart-spin-button {
        border-color: var(--smart-outline);
    }

    .smart-numeric-text-box .smart-spin-button[hover] {
        background-color: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
        border-color: var(--smart-ui-state-border-hover);
    }

    .smart-numeric-text-box-pressed-component,
    .smart-numeric-text-box .smart-spin-button[active],
    .smart-numeric-text-box .smart-numeric-text-box-radix-display.smart-numeric-text-box-pressed-component,
    .smart-numeric-text-box .smart-numeric-text-box-radix-display.smart-numeric-text-box-pressed-component[hover] {
        background-color: var(--smart-ui-state-active);
        color: var(--smart-ui-state-color-active);
        border-color: var(--smart-ui-state-border-active);
    }

    .smart-numeric-text-box input.smart-input {
        border-right-width: var(--smart-border-width);
        padding: var(--smart-editor-label-padding);
        background-color: var(--smart-background);
        color: inherit;
        font: inherit;
        text-align: var(--smart-numeric-text-box-text-align);
        outline: none;
        -webkit-appearance: none;
    }


    /* spin buttons only */
    .smart-numeric-text-box[spin-buttons] input.smart-input {
        width: calc(100% - var(--smart-editor-addon-width));
    }

    /* radix display button only */
    .smart-numeric-text-box[radix-display] input.smart-input {
        width: calc(100% - var(--smart-numeric-text-box-default-radix-display-width));
    }

    /* unit display only */
    .smart-numeric-text-box[show-unit] input.smart-input {
        width: calc(100% - var(--smart-numeric-text-box-default-unit-display-width));
    }

    /* spin buttons and radix display button */
    .smart-numeric-text-box[spin-buttons][radix-display] input.smart-input {
        width: calc(100% - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-radix-display-width));
    }

    /* spin buttons and unit display */
    .smart-numeric-text-box[spin-buttons][show-unit] input.smart-input {
        width: calc(100% - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-unit-display-width));
    }

    /* radix display button and unit display */
    .smart-numeric-text-box[radix-display][show-unit] input.smart-input {
        width: calc(100% - var(--smart-numeric-text-box-default-radix-display-width) - var(--smart-numeric-text-box-default-unit-display-width));
    }

    /* buttons and unit display */
    .smart-numeric-text-box[spin-buttons][radix-display][show-unit] input.smart-input {
        width: calc(100% - var(--smart-numeric-text-box-default-unit-display-width) - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-radix-display-width));
    }

    .smart-numeric-text-box .smart-spin-buttons-container {
        width: var(--smart-editor-addon-width);
    }

    .smart-numeric-text-box .smart-spin-button {
        height: 50%;
    }

    .smart-numeric-text-box .smart-spin-buttons-container {
        border: none;
    }

    .smart-numeric-text-box .smart-spin-button:first-child {
        border-bottom: none;
    }

    .smart-numeric-text-box .smart-spin-button:last-child {
    }

smart-numeric-text-box[spin-buttons][spin-buttons-position="left"] .smart-spin-button.smart-element:first-child {
    border-right: none;
}

smart-numeric-text-box[spin-buttons][spin-buttons-position="left"] .smart-spin-button.smart-element:last-child {
    border-right: none;
}

.smart-numeric-text-box .smart-spin-button .smart-button {
    border: none;
    padding: 0px;
}


.smart-numeric-text-box-radix-display {
    width: var(--smart-numeric-text-box-default-radix-display-width);
    justify-content: center;
    color: initial;
}

.smart-numeric-text-box-drop-down {
    position: absolute;
    box-sizing: border-box;
    height: auto;
    border-width: var(--smart-border-width);
    border-style: solid;
    border-color: var(--smart-border);
    box-shadow: var(--smart-elevation-8);
    padding: 2px;
    top: 100%;
    z-index: 9999;
    list-style-type: none;
    transform: scaleY(1);
    opacity: 1;
    color: var(--smart-background-color);
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
}

    .smart-numeric-text-box-drop-down.smart-visibility-hidden {
        transform: scaleY(0);
        opacity: 0;
    }

.smart-numeric-text-box .smart-numeric-text-box-unit-display {
    width: var(--smart-numeric-text-box-default-unit-display-width);
    border-width: var(--smart-border-width) 0 var(--smart-border-width) 0;
    overflow: hidden;
    background-color: var(--smart-background);
}

.smart-numeric-text-box-drop-down .smart-list-item {
    margin: 1px;
    border: 1px solid transparent;
    padding: 4px 8px 4px 8px;
    word-break: break-all;
}

    .smart-numeric-text-box-drop-down .smart-list-item:hover {
        background-color: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
    }

.smart-numeric-text-box[spin-buttons] input.smart-input,
.smart-numeric-text-box[show-unit] input.smart-input,
.smart-numeric-text-box[spin-buttons][spin-buttons-position="left"][show-unit] input.smart-input,
.smart-numeric-text-box[spin-buttons][spin-buttons-position="left"] .smart-spin-buttons-container,
.smart-numeric-text-box[spin-buttons][show-unit] .smart-numeric-text-box-unit-display {
    border-right-width: 0;
}

.smart-numeric-text-box[spin-buttons][spin-buttons-position="left"] input.smart-input,
.smart-numeric-text-box[spin-buttons] .smart-spin-buttons-container,
.smart-numeric-text-box[spin-buttons][spin-buttons-position="left"][show-unit] .smart-numeric-text-box-unit-display,
.smart-numeric-text-box[show-unit] .smart-numeric-text-box-unit-display {
    border-right-width: var(--smart-border-width);
}

.smart-numeric-text-box .smart-label,
.smart-numeric-text-box .smart-hint {
    display: none;
    position: absolute;
}

smart-numeric-text-box[label] .smart-label,
smart-numeric-text-box[hint] .smart-hint {
    position: absolute;
    left: 0;
    bottom: 100%;
    font-size: 12px;
    width: 100%;
    display: block;
    padding: var(--smart-editor-label-padding);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    text-align: initial;
    line-height: initial;
    vertical-align: initial;
}

.smart-numeric-text-box[hint] .smart-hint {
    opacity: 0;
}

.smart-numeric-text-box[hint][focus] .smart-hint {
    opacity: 1;
}

.smart-numeric-text-box:not([animation="none"])[hint] .smart-hint {
    transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.6, 1);
}

.smart-numeric-text-box:not([animation="none"])[hint][focus] .smart-hint {
    transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.smart-numeric-text-box[hint] .smart-hint {
    top: 100%;
    bottom: initial;
}

.smart-numeric-text-box:not([animation='none']) .smart-numeric-text-box-drop-down,
.smart-numeric-text-box-drop-down.smart-drop-down-repositioned:not([animation="none"]) {
    transform-origin: top;
    transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
}

/*Shape settings*/
.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

    .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left,
    .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-repeat-button-element {
        border-top-left-radius: var(--smart-border-top-left-radius);
        border-bottom-left-radius: var(--smart-border-bottom-left-radius);
    }

        .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-element:first-child {
            border-bottom-left-radius: 0px;
        }

        .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-element:last-child {
            border-top-left-radius: 0px;
        }

    .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right,
    .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element {
        border-top-right-radius: var(--smart-border-top-right-radius);
        border-bottom-right-radius: var(--smart-border-bottom-right-radius);
    }

        .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element:first-child {
            border-bottom-right-radius: 0px;
        }

        .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element:last-child {
            border-top-right-radius: 0px;
        }

.smart-numeric-text-box .smart-numeric-text-box-component {
    color: inherit;
}

/* --- Right To Left --- */

.smart-numeric-text-box-drop-down.smart-drop-down-repositioned[right-to-left],
smart-numeric-text-box[right-to-left] .smart-numeric-text-box-drop-down,
smart-numeric-text-box[right-to-left] .smart-numeric-text-box-radix-display,
smart-numeric-text-box[right-to-left] .smart-numeric-text-box-unit-display,
smart-numeric-text-box[right-to-left] input.smart-input,
smart-numeric-text-box[right-to-left] .smart-label,
smart-numeric-text-box[right-to-left] .smart-hint {
    direction: rtl;
}

smart-numeric-text-box[right-to-left] .smart-numeric-text-box-unit-display {
    flex-direction: row-reverse;
}

/* ---- */