/*
 * ===================================
 * UTKDefaultStyle.uss
 * Unity 기본 UI 요소 스타일 오버라이드
 * ===================================
 *
 * 이 파일은 Unity의 기본 UI 요소들을 커스터마이징합니다.
 * 변수 정의는 하지 않으며, 테마 파일의 변수를 참조합니다.
 *
 * [변수 정의 위치]
 * - UTKVariables.uss : 레이아웃 변수 (spacing, radius, font-size 등)
 * - UTKThemeDark.uss / UTKThemeLight.uss : 색상 변수
 *
 * [주요 스타일]
 * 1. 드롭다운 팝업 스타일
 * 2. TreeView 항목 스타일
 * 3. 컬렉션 뷰 항목 스타일 (선택, 호버)
 * 4. 수직/수평 스크롤바 스타일
 */

/* ===================================
드롭다운 팝업 아이템 스타일
- DropdownField의 팝업 메뉴 항목 스타일
- UTKComponents.uss에서 전역 스타일 정의됨
=================================== */

/* 여기서 변수 선언 하는 이유는 Dropdown의 팝업에 테마가 적용되지 않기에
 별도로 지정하기 위함입니다. */
.unity-base-dropdown * {
    --color-base-01: #FFFFFF;
    --color-base-02: #F8F8F8;
    --color-border: #D0D0D0;
    --color-collection-item-hover: #004578;
    --color-item-selected-bg: #004578;
    --color-item-selected-bg-hover: ##003F6E;
    --color-text-primary: #222222;
    --color-text-primary-hover: #1C1C1C;
}

/* 드롭다운 최외곽 컨테이너 - border-radius 및 border 적용
   UTKComponents.uss에도 정의되어 있지만, Unity 기본 스타일시트가 나중에 로드되어
   덮어쓰기 때문에를 사용하여 강제로 오버라이드합니다.
   border와 border-radius를 같은 요소에 적용하여 코너 렌더링 문제 방지. */
.unity-base-dropdown__container-outer {
    border-radius: var(--radius-s) ;
    border-width: 1px ;
    border-color: var(--color-border) ;
    overflow: hidden ;
}

/* 드롭다운 내부 컨테이너 - 패딩 제거 */
.unity-base-dropdown__container-inner {
    padding: 0px;
    background-color: var(--color-base-01) ;
}

/* 드롭다운 항목 hover 스타일 - Unity 기본 스타일 오버라이드
   다크 테마에 적합한 어두운 회색(#333333)으로 설정.
   Unity의 기본 cyan 계열 hover 색상을 덮어쓰기 위해 사용.
   :enabled 의사 클래스는 Unity 기본 스타일과 동일한 specificity 확보용. */
.unity-base-dropdown__item:hover:enabled {
    background-color: var(--color-collection-item-hover) ;
    color: var(--color-text-primary);
}

/* 드롭다운 항목 콘텐츠 */
.unity-base-dropdown__item-content {
    flex-direction: row;
    align-items: center;
}

.unity-base-dropdown__item:hover:enabled .unity-base-dropdown__item-content {
    background-color: var(--color-collection-item-hover) ;
}

.unity-base-dropdown__item:checked {
    background-color: var(--color-item-selected-bg);
    color: #ffffff;
}

.unity-base-dropdown__item:checked:hover {
    background-color: var(--color-item-selected-bg-hover);
}

.unity-base-dropdown__item:checked .unity-base-dropdown__item-content {
    background-color: var(--color-item-selected-bg);
}

.unity-base-dropdown__item:checked:hover .unity-base-dropdown__item-content {
    background-color: var(--color-item-selected-bg-hover);
}

.unity-base-dropdown__item:checked .unity-base-dropdown__label {
    color: var(--color-base-01);
}

/* 드롭다운 호버 시 텍스트 색상 */
.unity-base-dropdown__item:hover .unity-base-dropdown__label {
    color: var(--color-text-primary-hover);
}

.unity-base-dropdown__item:checked:hover .unity-base-dropdown__label {
    color: var(--color-text-primary);
}

/* 드롭다운 체크마크 크기 오버라이드
   Unity 런타임 테마의 체크마크 스타일(.unity-base-dropdown__item > .unity-base-dropdown__item-content > .unity-base-dropdown__checkmark)을
   덮어쓰기 위해 동일한 specificity + 순서 우선 또는 더 높은 specificity 사용 */
.unity-base-dropdown__item > .unity-base-dropdown__item-content > .unity-base-dropdown__checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    -unity-background-image-tint-color: var(--color-base-01);
}

.unity-base-dropdown__item {
    height: 28px;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    background-color: transparent;
    border-radius: 0;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}

/* 드롭다운 라벨 스타일 오버라이드 */
.unity-base-dropdown__item .unity-base-dropdown__label {
    font-size: 12px;
    color: var(--color-text-primary);
    -unity-text-align: middle-left;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}


/* ===================================
ListView/TreeView 항목 텍스트 스타일
- Unity 기본 스타일 오버라이드
=================================== */

/* ListView 항목 컨테이너 자체에 색상 지정 */
.unity-collection-view__item,
.unity-list-view__item {
    color: var(--color-text-primary) ;
}

/* ListView 항목 텍스트 색상 및 크기 - 다크 테마용 */
.unity-collection-view__item .unity-label,
.unity-collection-view__item .unity-text-element,
.unity-list-view__item .unity-label,
.unity-list-view__item .unity-text-element {
    color: var(--color-text-primary) ;
    font-size: var(--font-size-body2) ;
}

.unity-collection-view__item--selected,
.unity-list-view__item--selected {
    color: var(--color-base-01) ;
}

.unity-collection-view__item--selected .unity-label,
.unity-collection-view__item--selected .unity-text-element,
.unity-list-view__item--selected .unity-label,
.unity-list-view__item--selected .unity-text-element {
    color: var(--color-base-01) ;
}

.unity-tree-view__item-content {
    align-self: center;
    flex-direction: row;
}

/* TreeView 항목 텍스트 색상 */
.unity-tree-view__item .unity-label,
.unity-tree-view__item .unity-text-element {
    color: var(--color-text-primary) ;
    -unity-text-align: middle-left;
    padding: 0;
    margin: 0;
}

.unity-tree-view__item--selected .unity-label,
.unity-tree-view__item--selected .unity-text-element {
    color: var(--color-base-01) ;
}


/* ===================================
TreeView 항목 스타일
- TreeView의 펼치기/접기 토글 버튼 스타일
=================================== */

/* TreeView 펼치기/접기 화살표 토글 - 크기 및 정렬 조정 */
.unity-tree-view__item-toggle {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    align-self: center;
    -unity-background-image-tint-color: var(--color-text-secondary);
}

.unity-tree-view__item-toggle:hover {
    -unity-background-image-tint-color: var(--color-text-primary);
}

/* TreeView 토글 입력 영역 - 회전 중심 맞추기 */
.unity-tree-view__item-toggle > .unity-toggle__input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* TreeView 토글 체크마크(화살표 아이콘) */
.unity-tree-view__item-toggle > .unity-toggle__input > #unity-checkmark {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

/* TreeView 토글 체크됨(펼쳐진 상태) - 회전 없음 */
.unity-tree-view__item-toggle:checked > .unity-toggle__input > #unity-checkmark {
    rotate: 0deg;
}

#unity-checkmark {
    -unity-background-image-tint-color: var(--color-tree-checkmark);
}

#unity-tree-view__item-toggle > VisualElement > VisualElement {
    margin-left: 0;
    margin-right: 0;
    width: 22px;
}

/* ===================================
Textfield 항목 스타일
=================================== */

.unity-base-text-field {
    border-radius: 4px;
    height: 24px;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;    
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
    /* --unity-selection-color: rgba(54, 98, 160, 0.651);  선택 색상 */
    --unity-cursor-color: var(--color-base-01);  /* 캐럿(커서) 색상 흰색 */
    font-size: 13px;
    color: var(--color-text-primary);
}

 .unity-base-text-field__input {
    padding-top: 4px;
    padding-right: 24px;
    padding-bottom: 4px;
    padding-left: 4px;
    border-radius: var(--radius-s);
    border-width: var(--border-width);
    border-color: var(--color-border);
    background-color: var(--color-bg-input);
}

.unity-base-text-field__input--placeholder {
    -unity-font-style: italic;
}


/* ===================================
컬렉션 뷰 항목 스타일
- ListView, TreeView 등 컬렉션 뷰의 항목 상태별 스타일
- Unity 기본 테마 (.unity-collection-view:focus:enabled .unity-collection-view__item--selected)를
  덮어쓰기 위해 동일하거나 더 높은 specificity 사용
=================================== */

/* 일반 항목의 기본 배경색 */
.unity-collection-view__item {
    background-color: var(--color-collection-item);
}

/* 마우스 오버 시 배경색 변경 - :hover:enabled를 더 높은 specificity로 덮어씀 */
.unity-collection-view__item:hover:enabled {
    background-color: var(--color-collection-item-hover);
}

/* 선택된 항목의 배경색 - Unity 기본 테마의 :focus:enabled 셀렉터를 덮어씀 */
.unity-collection-view:focus:enabled .unity-collection-view__item--selected {
    background-color: var(--color-collection-item-selected);
}

/* 선택된 항목에 마우스 오버 시 배경색 - :hover:enabled를 더 높은 specificity로 덮어씀 */
.unity-collection-view:focus:enabled .unity-collection-view__item--selected:hover:enabled {
    background-color: var(--color-collection-item-selected-hover);
}


/* ===================================
수직 스크롤바 스타일
- 기본 Unity 스크롤바를 슬림하고 미니멀하게 커스터마이징

[주의] 스크롤바 드래거/트래커의 hover/active 색상은 USS :hover/:active
pseudo-class가 제대로 동작하지 않습니다.
드래거는 마우스 이벤트를 직접 받지 않고 트래커가 받기 때문입니다.
hover/active 색상 변경이 필요하면 UTKTreeListWindow.cs의
SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent 등을
등록하여 구현해야 합니다.
=================================== */

/* 수직 스크롤바 컨테이너 - 폭 6px의 슬림한 스크롤바 */
.unity-scroller--vertical {
    width: 6px;
    margin-right: 0px;
    margin-bottom: 0;
    background-color: rgba(30, 30, 30, 0);  /* 스크롤바 영역 배경색 */
}

/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
.unity-scroller--vertical .unity-base-slider__tracker {
    background-color: var(--color-scroller-tracker-normal);
    border-width: 0;
}

/* 드래그 컨테이너 - 좌우 정렬 */
.unity-scroller--vertical .unity-base-slider__drag-container {
    left: 0;
    right: 0;
}

/* 드래거 (스크롤 핸들) - 기본 상태 */
.unity-scroller--vertical .unity-base-slider__dragger {
    background-color: var(--color-scroller-dragger-normal);
    border-width: 0;
    border-radius: 3px;                          /* 둥근 모서리 */
    width: 6px;
    left: 0;
    transition-duration: 0.15s;                  /* 부드러운 전환 효과 */
    transition-property: background-color;
}

.unity-scroller--vertical .unity-base-slider__dragger:hover {
    background-color: var(--color-scroller-dragger-hover);
}

/* 상하 화살표 버튼 - 완전히 숨김 처리 */
.unity-scroller--vertical .unity-repeat-button {
    display: none;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
}

.unity-scroller--vertical > .unity-scroller__low-button,
.unity-scroller--vertical > .unity-scroller__high-button {
    display: none;
}

/* 슬라이더 - 여백 제거 */
.unity-scroller--vertical .unity-slider {
    margin: 0;
}

/* 입력 영역 - 폭 6px로 고정 */
.unity-scroller--vertical .unity-base-field__input {
    width: 6px;
    min-width: 6px;
}


/* ===================================
수평 스크롤바 스타일
- 수직 스크롤바와 동일한 디자인을 수평으로 적용
=================================== */

/* 수평 스크롤바 컨테이너 - 높이 6px의 슬림한 스크롤바 */
.unity-scroller--horizontal {
    height: 6px;
    margin-bottom: 4px;
    margin-right: 0;
    background-color: rgba(30, 30, 30, 0);  /* 스크롤바 영역 배경색 */
}

/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
.unity-scroller--horizontal .unity-base-slider__tracker {
    background-color: var(--color-scroller-tracker-normal);
    border-width: 0;
}

/* 드래그 컨테이너 - 상하 정렬 */
.unity-scroller--horizontal .unity-base-slider__drag-container {
    top: 0;
    bottom: 0;
}

/* 드래거 (스크롤 핸들) - 기본 상태 */
.unity-scroller--horizontal .unity-base-slider__dragger {
    background-color: var(--color-scroller-dragger-normal);
    border-width: 0;
    border-radius: 3px;                          /* 둥근 모서리 */
    height: 6px;
    top: 0;
    transition-duration: 0.15s;                  /* 부드러운 전환 효과 */
    transition-property: background-color;
}

.unity-scroller--horizontal .unity-base-slider__dragger:hover {
    background-color: var(--color-scroller-dragger-hover);
}

/* 좌우 화살표 버튼 - 완전히 숨김 처리 */
.unity-scroller--horizontal .unity-repeat-button {
    display: none;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
}

.unity-scroller--horizontal > .unity-scroller__low-button,
.unity-scroller--horizontal > .unity-scroller__high-button {
    display: none;
}

/* 슬라이더 - 여백 제거 */
.unity-scroller--horizontal .unity-slider {
    margin: 0;
}

/* 입력 영역 - 높이 6px로 고정 */
.unity-scroller--horizontal .unity-base-field__input {
    height: 6px;
    min-height: 6px;
}


/* USS 파일 */
.material-icon {
    -unity-font-definition: resource('Fonts/Icons/MaterialSymbolsOutlined');
    font-size: 24px;
    -unity-text-align: middle-center;
}

/* ===================================
   UTKPanel Content 내부 Label 스타일
   - UTKPanel.uss가 자식에 적용되지 않는 문제 해결
   =================================== */
.utk-panel__content > .unity-label {
    font-size: var(--font-size-body2) ;
    color: var(--color-text-secondary) ;
    margin-bottom: var(--space-s);
}