/*
 * ===================================
 * UTKCheckBox.uss
 * 체크박스 스타일
 * ===================================
 */

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

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

/* ===================================
   Checkbox Box
   =================================== */

.utk-checkbox__box {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: var(--radius-s);
    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-checkbox:hover .utk-checkbox__box {
    border-color: var(--color-btn-primary);
}

.utk-checkbox--checked .utk-checkbox__box,
.utk-checkbox--indeterminate .utk-checkbox__box {
    border-color: var(--color-btn-primary);
    background-color: var(--color-btn-primary);
}

/* ===================================
   Check Icon
   =================================== */

.utk-checkbox__icon {
    width: 14px;
    height: 14px;
    font-size: 12px;
    color: var(--color-text-on-primary);
    -unity-text-align: middle-center;
    -unity-font-style: bold;
    opacity: 0;
    transition-duration: var(--anim-fast);
    transition-property: opacity;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

.utk-checkbox--checked .utk-checkbox__icon,
.utk-checkbox--indeterminate .utk-checkbox__icon {
    opacity: 1;
}

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

.utk-checkbox__label {
    margin-left: var(--space-m);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
}

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

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

.utk-checkbox--disabled .utk-checkbox__box {
    border-color: var(--color-border);
    background-color: var(--color-btn-disabled);
}

.utk-checkbox--disabled:hover .utk-checkbox__box {
    border-color: var(--color-border);
}

.utk-checkbox--disabled.utk-checkbox--checked .utk-checkbox__box,
.utk-checkbox--disabled.utk-checkbox--indeterminate .utk-checkbox__box {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
}

.utk-checkbox--disabled.utk-checkbox--checked:hover .utk-checkbox__box,
.utk-checkbox--disabled.utk-checkbox--indeterminate:hover .utk-checkbox__box {
    border-color: var(--color-text-disabled);
}

.utk-checkbox--disabled .utk-checkbox__label {
    color: var(--color-text-disabled);
}