/*
 * ===================================
 * UTKButton.uss
 * 기본 버튼 컴포넌트 스타일
 * ===================================
 */

/* ===================================
   Base Button
   =================================== */

.utk-button {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    border-radius: var(--radius-s);
    border-width: var(--border-width);
    border-color: var(--color-border);
    background-color: var(--color-btn-normal);
    color: var(--color-text-primary);
    transition-duration: var(--anim-fast);
    transition-property: background-color, border-color, color;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}

.utk-button:hover {
    background-color: var(--color-btn-hover);
}

.utk-button:active {
    background-color: var(--color-btn-pressed);
}

.utk-button:focus {
    border-color: var(--color-border-focus);
}

/* ===================================
   Button Icon
   =================================== */

.utk-button__icon {
    font-size: var(--font-size-body1);
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
    -unity-text-align: middle-center;
    align-self: center;
}

.utk-button--has-icon .utk-button__icon {
    margin-right: var(--space-s);
}

/* ===================================
   Button Text
   =================================== */

.utk-button__text {
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    -unity-text-align: middle-center;
    margin-top: 2px;
}

/* ===================================
   Icon Only Mode
   =================================== */

.utk-button--icon-only {
    padding: 0;
    min-width: auto;
    width: var(--size-icon-btn);
    height: var(--size-icon-btn);
    justify-content: center;
    align-items: center;
}

.utk-button--icon-only .utk-button__icon {
    margin: 0;
    padding: 0;
    align-self: center;
}

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

.utk-button--small {
    height: 20px;
    min-width: 60px;
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    font-size: var(--font-size-label3);
}

.utk-button--small .utk-button__text {
    font-size: var(--font-size-label3);
}

.utk-button--small .utk-button__icon {
    font-size: var(--font-size-label3);
}

.utk-button--medium {
    height: var(--size-btn-height);
    min-width: var(--size-btn-min-width);
}

.utk-button--large {
    height: 32px;
    min-width: 100px;
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}

.utk-button--large .utk-button__text {
    font-size: var(--font-size-body1);
}

.utk-button--large .utk-button__icon {
    font-size: var(--font-size-body1);
}

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

/* Normal (Default) */
.utk-button--normal {
    background-color: var(--color-btn-normal);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.utk-button--normal:hover {
    background-color: var(--color-btn-hover);
}

.utk-button--normal:active {
    background-color: var(--color-btn-pressed);
}

/* Primary */
.utk-button--primary {
    background-color: var(--color-btn-primary);
    border-color: var(--color-btn-primary);
    color: var(--color-text-on-primary);
}

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

.utk-button--primary:active {
    background-color: var(--color-blue-04);
    border-color: var(--color-blue-04);
}

.utk-button--primary .utk-button__text,
.utk-button--primary .utk-button__icon {
    color: var(--color-text-on-primary);
}

/* Secondary */
.utk-button--secondary {
    background-color: var(--color-btn-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.utk-button--secondary:hover {
    background-color: var(--color-btn-secondary-hover);
}

/* Ghost (Transparent) */
.utk-button--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-primary);
}

.utk-button--ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.utk-button--ghost:active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Danger */
.utk-button--danger {
    background-color: var(--color-red-01);
    border-color: var(--color-red-01);
    color: var(--color-text-on-primary);
}

.utk-button--danger:hover {
    background-color: var(--color-red-02);
    border-color: var(--color-red-02);
}

.utk-button--danger .utk-button__text,
.utk-button--danger .utk-button__icon {
    color: var(--color-text-on-primary);
}

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

/* Outline Normal */
.utk-button--outline-normal {
    background-color: transparent;
    border-color: var(--color-border);
    border-width: 1px;
    color: var(--color-text-primary);
}

.utk-button--outline-normal:hover {
    background-color: var(--color-btn-hover);
    border-color: var(--color-text-primary);
}

.utk-button--outline-normal:active {
    background-color: var(--color-btn-pressed);
}

.utk-button--outline-normal .utk-button__text,
.utk-button--outline-normal .utk-button__icon {
    color: var(--color-text-primary);
}

/* Outline Primary */
.utk-button--outline-primary {
    background-color: transparent;
    border-color: var(--color-btn-primary);
    border-width: 1px;
    color: var(--color-btn-primary);
}

.utk-button--outline-primary:hover {
    background-color: var(--color-btn-primary);
    border-color: var(--color-btn-primary);
}

.utk-button--outline-primary:active {
    background-color: var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
}

.utk-button--outline-primary .utk-button__text,
.utk-button--outline-primary .utk-button__icon {
    color: var(--color-btn-primary);
}

.utk-button--outline-primary:hover .utk-button__text,
.utk-button--outline-primary:hover .utk-button__icon {
    color: var(--color-text-on-primary);
}

/* Outline Danger */
.utk-button--outline-danger {
    background-color: transparent;
    border-color: var(--color-red-01);
    border-width: 1px;
    color: var(--color-red-01);
}

.utk-button--outline-danger:hover {
    background-color: var(--color-red-01);
    border-color: var(--color-red-01);
}

.utk-button--outline-danger:active {
    background-color: var(--color-red-02);
    border-color: var(--color-red-02);
}

.utk-button--outline-danger .utk-button__text,
.utk-button--outline-danger .utk-button__icon {
    color: var(--color-red-01);
}

.utk-button--outline-danger:hover .utk-button__text,
.utk-button--outline-danger:hover .utk-button__icon {
    color: var(--color-text-on-primary);
}

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

.utk-button--disabled {
    background-color: var(--color-btn-disabled);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: arrow;
}

.utk-button--disabled:hover {
    background-color: var(--color-btn-disabled);
    border-color: var(--color-border);
}

.utk-button--disabled:active {
    background-color: var(--color-btn-disabled);
    border-color: var(--color-border);
}

.utk-button--disabled:focus {
    border-color: var(--color-border);
}

.utk-button--disabled .utk-button__text,
.utk-button--disabled .utk-button__icon {
    color: var(--color-text-disabled);
}