@import "../../input/src/Input.css";

.o-ui {
    --o-ui-spinner-width: var(--o-ui-global-scale-foxtrot);
}

.o-ui-number-input {
    /* 150px @ 16px */
    width: 9.365rem;
}

/* INPUT */
.o-ui-number-input input::-webkit-inner-spin-button,
.o-ui-number-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.o-ui-number-input input {
    -moz-appearance: textfield;
    padding-right: calc(var(--o-ui-spinner-width) + 2px);
}

/* SPINNER */
.o-ui-number-input-spinner {
    display: flex;
    visibility: hidden;
    flex-direction: column;
    width: var(--o-ui-spinner-width);
    min-height: calc(var(--o-ui-global-scale-hotel) - 2px);
    margin: 1px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* TRANSPARENT */
.o-ui-input-transparent .o-ui-number-input-spinner {
    margin: 0;
}

.o-ui-number-input-spinner-increment,
.o-ui-number-input-spinner-decrement {
    display: flex;
    justify-content: center;
    flex: 1 1 0%;
    padding: 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--o-ui-input-border-color);
    outline: none;
    cursor: pointer;
    background-color: var(--o-ui-alias-background-4);
}

.o-ui-number-input-spinner-increment {
    border-top-right-radius: var(--o-ui-input-border-radius);
    border-bottom: 1px solid var(--o-ui-input-border-color);
}

.o-ui-number-input-spinner-decrement {
    border-bottom-right-radius: var(--o-ui-input-border-radius);
}

/* SPINNER | VISIBLE */
.o-ui-number-input:hover .o-ui-number-input-spinner,
.o-ui-input-hover .o-ui-number-input-spinner,
.o-ui-number-input input:focus-visible + .o-ui-number-input-spinner,
.o-ui-input-focus .o-ui-number-input-spinner {
    visibility: visible;
}

.o-ui-number-input-spinner .o-ui-icon {
    fill: var(--o-ui-alias-icon-1);
}

/* SPINNER | ACTIVE */
.o-ui-number-input-spinner-increment:active:not(:disabled),
.o-ui-number-input-spinner-decrement:active:not(:disabled),
.o-ui-number-input-spinner-increment:hover:active:not(:disabled),
.o-ui-number-input-spinner-decrement:hover:active:not(:disabled) {
    background-color: var(--o-ui-alias-background-4-active);
}

/* SPINNER | HOVER */
.o-ui-number-input-spinner-increment:hover,
.o-ui-number-input-spinner-decrement:hover {
    background-color: var(--o-ui-alias-background-4-hover);
}

/* SPINNER | DISABLED */
.o-ui-number-input-spinner-increment:disabled,
.o-ui-number-input-spinner-decrement:disabled {
    opacity: var(--o-ui-disabled-opacity);
}

/* SPINNER | LOADING */
.o-ui-input-loading .o-ui-number-input-spinner {
    display: none;
}

/* SPINNER | TRANSPARENT */
.o-ui-input-transparent .o-ui-number-input-spinner-increment,
.o-ui-input-transparent .o-ui-number-input-spinner-decrement {
    background-color: var(--o-ui-global-transparent);
    border: 0;
}

/* SPINNER | TRANSPARENT | HOVER */
.o-ui-input-transparent .o-ui-number-input-spinner-increment:hover,
.o-ui-input-transparent .o-ui-number-input-spinner-decrement:hover {
    background-color: var(--o-ui-alias-background-4-hover);
}

/* SPINNER | TRANSPARENT | HOVER ACTIVE */
.o-ui-input-transparent .o-ui-number-input-spinner-increment:active:hover,
.o-ui-input-transparent .o-ui-number-input-spinner-decrement:active:hover {
    background-color: var(--o-ui-alias-background-4-active);
}

.o-ui-input-transparent .o-ui-number-input-spinner-increment {
    border: 0;
}

/* SPINNER | TRANSPARENT | ACTIVE */
.o-ui-input-transparent .o-ui-number-input-spinner-increment:active,
.o-ui-input-transparent .o-ui-number-input-spinner-decrement:active {
    background-color: var(--o-ui-alias-background-4-active);
}

/* IN GROUP */
.o-ui-number-input-in-group {
    width: 100px;
}