/*
 * ===================================
 * UTKIntStepper.uss
 * Number Stepper Component Styles
 * ===================================
 */

/* ===================================
   Root Container
   =================================== */

.utk-number-stepper {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--size-input-height);
}


/* ===================================
   Text Input Field
   =================================== */

.utk-number-stepper__input {
    flex-grow: 1;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--font-size-body2);
}

.utk-number-stepper__text-input {
    flex-grow: 1;
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    --unity-cursor-color: var(--color-text-primary);
    border-top-left-radius: var(--radius-s);
    border-bottom-left-radius: var(--radius-s);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-width: var(--border-width);
    border-bottom-width: var(--border-width);
    border-left-width: var(--border-width);
    border-right-width: 0;
    border-top-color: var(--color-border);
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-border);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    margin: 0;
    -unity-text-align: middle-right;
}


/* ===================================
   Button Container
   =================================== */

.utk-number-stepper__buttons {
    flex-direction: column;
    width: 16px;
}


/* ===================================
   Stepper Buttons (Base)
   =================================== */

.utk-number-stepper__btn {
    flex-grow: 1;
    width: 16px;
    font-size: 6px;
    padding: 0;
    margin: 0;
    background-color: var(--color-btn-normal);
    color: var(--color-text-secondary);
    border-top-width: var(--border-width);
    border-left-width: 0;
    border-right-width: var(--border-width);
    border-top-color: var(--color-border);
    border-right-color: var(--color-border);
    border-bottom-color: var(--color-border);
    transition-duration: var(--anim-fast);
    transition-property: background-color, color;
    height: 12px;
}

.utk-number-stepper__btn:hover {
    background-color: var(--color-btn-hover);
    color: var(--color-text-primary);
}

.utk-number-stepper__btn:active {
    background-color: var(--color-btn-pressed);
}


/* ===================================
   Up Button
   =================================== */

.utk-number-stepper__btn--up {
    border-bottom-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-s);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* ===================================
   Down Button
   =================================== */

.utk-number-stepper__btn--down {
    border-bottom-width: var(--border-width);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--radius-s);
}


/* ===================================
   Disabled State
   =================================== */

.utk-number-stepper--disabled {
    cursor: arrow;
}

.utk-number-stepper--disabled .utk-number-stepper__text-input {
    background-color: var(--color-btn-disabled);
    color: var(--color-text-disabled);
    cursor: arrow;
}

.utk-number-stepper--disabled .utk-number-stepper__text-input:hover {
    border-color: var(--color-border);
}

.utk-number-stepper--disabled .utk-number-stepper__btn {
    background-color: var(--color-btn-disabled);
    color: var(--color-text-disabled);
    cursor: arrow;
}

.utk-number-stepper--disabled .utk-number-stepper__btn:hover {
    background-color: var(--color-btn-disabled);
    color: var(--color-text-disabled);
}

.utk-number-stepper--disabled .utk-number-stepper__btn:active {
    background-color: var(--color-btn-disabled);
}

/* ===================================
   Error State
   =================================== */

.utk-number-stepper--error .utk-number-stepper__text-input {
    border-top-color: var(--color-border-error);
    border-bottom-color: var(--color-border-error);
    border-left-color: var(--color-border-error);
}

.utk-number-stepper--error .utk-number-stepper__btn {
    border-top-color: var(--color-border-error);
    border-right-color: var(--color-border-error);
    border-bottom-color: var(--color-border-error);
}

/* Error Message Label */
.utk-number-stepper__error-message {
    width: 100%;
    margin-top: var(--space-xs);
    font-size: var(--font-size-caption);
    color: var(--color-state-error);
    white-space: normal;
}