/*
 * ===================================
 * UTKToggle.uss
 * Unity Toggle 래핑 스타일
 * ===================================
 */

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

.utk-toggle {
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}

/* ===================================
   Hide default Unity checkmark
   =================================== */

.utk-toggle > .unity-toggle__input {
    width: 36px;
    height: 20px;
    min-width: 36px;
    min-height: 20px;
    border-radius: 10px;
    background-color: var(--color-btn-normal);
    border-width: var(--border-width);
    border-color: var(--color-border);
    flex-shrink: 0;
    transition-duration: var(--anim-normal);
    transition-property: background-color, border-color;
}

.utk-toggle:hover > .unity-toggle__input {
    border-color: var(--color-btn-primary);
}

.utk-toggle--on > .unity-toggle__input {
    background-color: var(--color-btn-primary);
    border-color: var(--color-btn-primary);
}

/* ===================================
   Checkmark (Thumb)
   =================================== */

.utk-toggle > .unity-toggle__input > .unity-toggle__checkmark {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background-color: var(--color-text-secondary);
    -unity-background-image-tint-color: transparent;
    background-image: none;
    margin: 2px;
    transition-duration: var(--anim-normal);
    transition-property: translate, background-color;
}

.utk-toggle--on > .unity-toggle__input > .unity-toggle__checkmark {
    translate: 16px 0;
    background-color: var(--color-text-on-primary);
}

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

.utk-toggle > .unity-toggle__label,
.utk-toggle > .unity-label {
    margin-left: var(--space-m);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
}

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

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

.utk-toggle--disabled > .unity-toggle__input {
    background-color: var(--color-btn-disabled);
    border-color: var(--color-border);
}

.utk-toggle--disabled:hover > .unity-toggle__input {
    border-color: var(--color-border);
}

.utk-toggle--disabled.utk-toggle--on > .unity-toggle__input {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
}

.utk-toggle--disabled.utk-toggle--on:hover > .unity-toggle__input {
    border-color: var(--color-text-disabled);
}

.utk-toggle--disabled > .unity-toggle__input > .unity-toggle__checkmark {
    background-color: var(--color-text-disabled);
}

.utk-toggle--disabled > .unity-toggle__label,
.utk-toggle--disabled > .unity-label {
    color: var(--color-text-disabled);
}