/*
 * ===================================
 * UTKRadioButton.uss
 * Unity RadioButton 래핑 스타일
 * ===================================
 */

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

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

/* ===================================
   Radio Input Container
   =================================== */

.utk-radio > .unity-radio-button__input {
    flex-direction: row;
    align-items: center;
}

/* ===================================
   Checkmark Container (Outer Circle)
   =================================== */

.utk-radio .unity-radio-button__checkmark-background {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    border-width: 2px;
    border-color: var(--color-border);
    background-color: var(--color-bg-input);
    align-items: center;
    justify-content: center;
    transition-duration: var(--anim-fast);
    transition-property: border-color, background-color;
}

.utk-radio:hover .unity-radio-button__checkmark-background {
    border-color: var(--color-btn-primary);
}

.utk-radio:checked .unity-radio-button__checkmark-background {
    border-color: var(--color-btn-primary);
    background-color: var(--color-btn-primary);
}

/* ===================================
   Checkmark (Inner Dot)
   =================================== */

.utk-radio .unity-radio-button__checkmark {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: transparent;
    background-image: none;
    -unity-background-image-tint-color: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    transition-duration: var(--anim-fast);
    transition-property: background-color;
}

.utk-radio:checked .unity-radio-button__checkmark {
    background-color: var(--color-text-on-primary);
}

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

.utk-radio .unity-radio-button__text {
    margin-left: var(--space-s);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
}

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

.utk-radio:disabled {
    cursor: arrow;
    opacity: 1;
}

.utk-radio:disabled .unity-radio-button__checkmark-background {
    border-color: var(--color-border);
    background-color: var(--color-btn-disabled);
}

.utk-radio:disabled:hover .unity-radio-button__checkmark-background {
    border-color: var(--color-border);
}

.utk-radio:disabled:checked:hover .unity-radio-button__checkmark-background {
    border-color: var(--color-text-disabled);
}

.utk-radio:disabled:checked .unity-radio-button__checkmark-background {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
}

.utk-radio:disabled .unity-radio-button__checkmark {
    background-color: var(--color-btn-disabled);
}

.utk-radio:disabled:checked .unity-radio-button__checkmark {
    background-color: var(--color-text-on-primary);
}

.utk-radio:disabled .unity-radio-button__text {
    color: var(--color-text-disabled);
}