/*
 * ===================================
 * UTKPanel.uss
 * 패널 컨테이너 스타일
 * ===================================
 */

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

.utk-panel {
    flex-direction: column;
    background-color: var(--color-bg-panel);
    border-radius: var(--radius-m);
    overflow: hidden;
}

/* ===================================
   Variants
   =================================== */

.utk-panel--default {
    background-color: var(--color-bg-panel);
    border-width: var(--border-width);
    border-color: var(--color-border);
}

.utk-panel--elevated {
    background-color: var(--color-bg-elevated);
    border-width: 0;
}

.utk-panel--outlined {
    background-color: transparent;
    border-width: var(--border-width);
    border-color: var(--color-border);
}

.utk-panel--flat {
    background-color: transparent;
    border-width: 0;
}

/* ===================================
   Header
   =================================== */

.utk-panel__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-m) var(--space-l);
    border-bottom-width: var(--border-width);
    border-bottom-color: var(--color-border);
}

.utk-panel--flat .utk-panel__header {
    border-bottom-width: 0;
}

.utk-panel--collapsible .utk-panel__header {
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}

.utk-panel--collapsible .utk-panel__header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ===================================
   Title
   =================================== */

.utk-panel__title {
    font-size: var(--font-size-body1);
    color: var(--color-text-primary);
    -unity-font-style: bold;
}

/* ===================================
   Header Actions
   =================================== */

.utk-panel__header-actions {
    flex-direction: row;
    align-items: center;
}

/* ===================================
   Content
   =================================== */

.utk-panel__content {
    flex-grow: 1;
    padding: var(--space-l);
}

.utk-panel--collapsed .utk-panel__content {
    display: none;
}

/* ===================================
   Footer
   =================================== */

.utk-panel__footer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: var(--space-m) var(--space-l);
    border-top-width: var(--border-width);
    border-top-color: var(--color-border);
}

.utk-panel--flat .utk-panel__footer {
    border-top-width: 0;
}

.utk-panel--collapsed .utk-panel__footer {
    display: none;
}