/*
 * ===================================
 * UTKToggleButtonGroup.uss
 * Unity ToggleButtonGroup 래핑 스타일
 * ===================================
 */

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

.utk-toggle-group {
    flex-direction: row;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-s);
    border-width: var(--border-width);
    border-color: var(--color-border);
    padding: 2px;
}

/* ===================================
   Toggle Buttons
   =================================== */

.utk-toggle-group > .unity-button {
    margin: 0;
    padding: var(--space-xs) var(--space-m);
    background-color: transparent;
    border-width: 0;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    transition-duration: var(--anim-fast);
    transition-property: background-color, color;
}

.utk-toggle-group > .unity-button:hover {
    background-color: var(--color-btn-hover);
}

.utk-toggle-group > .unity-button:checked {
    background-color: var(--color-btn-primary);
    color: var(--color-text-on-primary);
}

.utk-toggle-group > .unity-button:checked:hover {
    background-color: var(--color-btn-primary-hover);
}

/* ===================================
   Custom Button Class
   =================================== */

.utk-toggle-group__button {
    flex-direction: row;
    align-items: center;
}

.utk-toggle-group__icon {
    margin-right: var(--space-xs);
}

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

.utk-toggle-group--disabled {
    opacity: 1;
}

.utk-toggle-group--disabled > .unity-button {
    color: var(--color-text-disabled);
    background-color: transparent;
}

.utk-toggle-group--disabled > .unity-button:hover {
    background-color: transparent;
}

.utk-toggle-group--disabled > .unity-button:checked {
    background-color: var(--color-btn-disabled);
    color: var(--color-text-disabled);
}

.utk-toggle-group--disabled > .unity-button:checked:hover {
    background-color: var(--color-btn-disabled);
}