XRLib/Assets/Resources/UIToolkit/Dropdown/UTKDropdownUss.uss

/*
 * ===================================
 * UTKDropdown.uss
 * 단일 선택 드롭다운 스타일
 * ===================================
 */

/* ===================================
   Base Container
   =================================== */

.utk-dropdown {
    flex-direction: row;
    align-items: center;
    position: relative;
    overflow: visible;
}

/* ===================================
   Label
   =================================== */

.utk-dropdown__label {
    min-width: 60px;
    margin-right: var(--space-m);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    -unity-font-style: normal;
    display: none;
}

/* ===================================
   Input Container (Display Field)
   =================================== */

.utk-dropdown__input {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 100px;
    flex-grow: 1;
    height: var(--size-input-height);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: var(--space-m);
    padding-right: 0;
    background-color: var(--color-bg-input);
    border-width: var(--border-width);
    border-color: var(--color-border);
    border-radius: var(--radius-s);
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
    transition-duration: var(--anim-fast);
    transition-property: border-color, background-color;
}

.utk-dropdown__input:hover {
    border-color: var(--color-btn-primary);
}

.utk-dropdown--open .utk-dropdown__input {
    border-color: var(--color-border-focus);
}

/* ===================================
   Display Label
   =================================== */

.utk-dropdown__display {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -unity-text-align: middle-left;
}

.utk-dropdown__display--placeholder {
    color: var(--color-text-secondary);
}

/* ===================================
   Dropdown Icon Container
   =================================== */

.utk-dropdown__icon-container {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: var(--space-s);
    margin-right: 0;
    align-items: center;
    justify-content: center;
}

/* ===================================
   Dropdown Icon
   =================================== */

.utk-dropdown__icon {
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: var(--color-text-secondary);
    -unity-text-align: middle-center;
}

/* ===================================
   Popup Container
   =================================== */

.utk-dropdown__popup {
    max-height: 300px;
    background-color: var(--color-bg-elevated);
    border-width: var(--border-width);
    border-color: var(--color-border);
    border-radius: var(--radius-s);
    padding: var(--space-xs);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* ===================================
   Options ScrollView
   =================================== */

.utk-dropdown__options {
    max-height: 280px;
}

.utk-dropdown__options > .unity-scroll-view__content-container {
    flex-direction: column;
}

/* ===================================
   Option Item
   =================================== */

.utk-dropdown__option {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding: var(--space-xs) var(--space-s);
    padding-left: 36px; /* 체크 아이콘 공간 확보: 8px(padding) + 20px(icon) + 8px(gap) */
    border-radius: var(--radius-s);
    transition-duration: var(--anim-fast);
    transition-property: background-color;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}

.utk-dropdown__option:hover,
.utk-dropdown__option--hover {
    background-color: var(--color-bg-hover);
}

/* ===================================
   Check Icon (Selected Indicator)
   =================================== */

.utk-dropdown__check-icon {
    position: absolute;
    left: 8px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    color: var(--color-btn-primary);
    -unity-text-align: middle-center;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;  /* 클릭 가능 커서 */
}

/* ===================================
   Option Label
   =================================== */

.utk-dropdown__option-label {
    flex-grow: 1;
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    margin-left: 0;
    padding-left: 0;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;  /* 클릭 가능 커서 */
}

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

.utk-dropdown--disabled {
    cursor: arrow;
}

.utk-dropdown--disabled .utk-dropdown__label {
    color: var(--color-text-disabled);
}

.utk-dropdown--disabled .utk-dropdown__input {
    background-color: var(--color-btn-disabled);
    cursor: arrow;
}

.utk-dropdown--disabled .utk-dropdown__input:hover {
    border-color: var(--color-border);
}

.utk-dropdown--disabled .utk-dropdown__display {
    color: var(--color-text-disabled);
}

.utk-dropdown--disabled .utk-dropdown__icon {
    color: var(--color-text-disabled);
}