/* static/css/components/buttons.css */

/* =========================================
   1. Base Structure (Auto Layout)
   ========================================= */
.btn {
    /* Auto layout logic */
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Default Icon gap */
    
    /* Typography settings */
    font-family: 'Pretendard', 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    
    /* Interaction & Reset */
    border: 1px solid transparent; /* Reserve space for border */
    cursor: pointer;
    box-sizing: border-box; /* Ensure padding doesn't affect total width */
    transition: all 0.2s ease-in-out;
    
    /* Flex item settings */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* =========================================
   2. Sizes (Strictly based on Figma)
   ========================================= */

/* --- Big --- */
.btn-big {
    /* Dimensions from Figma */
    height: 54px;
    min-height: 32px;
    max-height: 54px;
    
    /* Padding & Width constraints */
    padding: 12px 16px;
    min-width: 40px;
    /* max-width: 180px;  <-- Optional: Remove if you want full width fluidity */
    
    /* Border Radius */
    border-radius: 8px;
    
    /* Typography */
    font-size: 16px;
    line-height: 19px;
}

/* --- Medium --- */
.btn-medium {
    /* Dimensions from Figma */
    height: 48px;
    min-height: 32px;
    max-height: 54px;
    
    /* Padding & Width constraints */
    padding: 12px 16px;
    min-width: 40px;
    /* max-width: 180px; */
    
    /* Border Radius */
    border-radius: 8px;
    
    /* Typography */
    font-size: 16px;
    line-height: 19px;
}

/* --- Small --- */
.btn-small {
    /* Dimensions from Figma */
    height: 40px;
    min-height: 26.67px;
    max-height: 45px;
    
    /* Padding & Width constraints */
    padding: 10px 8px;
    min-width: 33.33px;
    /* max-width: 150px; */
    
    /* Border Radius */
    border-radius: 6.66667px; /* Exact value from Figma */
    
    /* Typography */
    font-size: 13.3333px;     /* Exact value from Figma */
    line-height: 16px;
}

/* --- Tiny (Capsule) --- */
.btn-tiny {
    /* Dimensions from Figma (btn_joinus) */
    height: 40px;
    
    /* Padding & Width constraints */
    padding: 8px 16px;
    gap: 10px; /* Specific gap for Tiny */
    min-width: 80px;
    
    /* Border Radius */
    border-radius: 100px; /* Capsule shape */
    
    /* Typography */
    font-size: 16px;
    line-height: 19px;
}

.btn-micro {
    /* 严格遵守 Figma 尺寸 */
    height: 32px;
    min-height: 32px;
    
    /* 宽度与内边距 */
    min-width: 94px;
    padding: 0 16px;
    
    /* 圆角 */
    border-radius: 8px;
    
    /* 字体微调 */
    font-size: 14px;
    line-height: normal;
}
/* =========================================
   3. Types (Colors & Styles)
   ========================================= */

/* --- Primary (Green Solid) --- */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
/* State: Hover / Focus */
.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus {
    background-color: var(--btn-primary-hover);
}
/* State: Pressed */
.btn-primary:not(:disabled):active {
    background-color: var(--btn-primary-active);
}

/* --- Secondary (Light Green) --- */
.btn-secondary {
    background-color: var(--green-100, #B4F9D3);
    border-color: var(--green-700, #09A750); /* 激活边框颜色 */
    color: var(--grey-900, #111827);
}
/* State: Hover / Focus */
.btn-secondary:not(:disabled):hover,
.btn-secondary:not(:disabled):focus {
    background-color: var(--green-300, #5DF29F);
    border-color: var(--green-700, #09A750); /* 保持边框颜色死死不变 */
    color: #FFFFFF;
}
/* State: Pressed (Active) */
.btn-secondary:not(:disabled):active {
    background-color: var(--green-900, #05632F);
    border-color: var(--green-700, #09A750); /* 保持边框颜色死死不变 */
    color: #FFFFFF;
}

/* --- Outline (Bordered) --- */
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--btn-outline-border);
    color: var(--btn-outline-text);
}
/* State: Hover / Focus */
.btn-outline:not(:disabled):hover,
.btn-outline:not(:disabled):focus {
    background-color: var(--btn-outline-hover-bg);
}
/* State: Pressed */
.btn-outline:not(:disabled):active {
    background-color: var(--btn-outline-border);
    color: var(--btn-primary-text); /* Invert text color on press */
}

/* --- Tertiary (Dark Grey) --- */
.btn-tertiary {
    background-color: var(--btn-tertiary-bg);
    color: var(--btn-tertiary-text);
}
/* State: Hover / Focus */
.btn-tertiary:not(:disabled):hover,
.btn-tertiary:not(:disabled):focus {
    background-color: var(--btn-tertiary-hover);
}
/* State: Pressed */
.btn-tertiary:not(:disabled):active {
    background-color: var(--btn-tertiary-active);
}

.btn-outline-white {
    background-color: transparent;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-weight: 500;
}

/* Hover: 微微发白 */
.btn-outline-white:not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
}

/* Active (Pressed): 变实心白，文字变黑 */
.btn-outline-white:not(:disabled):active {
    background-color: #FFFFFF;
    color: #000000;
}

.btn-icon {
    min-width: unset !important; /* 取消最小宽度限制 */
    width: 40px;  /* 宽度等于高度 */
    height: 40px; /* 确保是正方形/圆形 */
    padding: 0 !important; /*去掉内边距 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   4. Global States
   ========================================= */

/* Disabled State */
.btn:disabled,
.btn.disabled {
    background-color: var(--btn-disabled-bg) !important;
    color: var(--btn-disabled-text) !important;
    border-color: transparent !important;
    cursor: not-allowed;
    pointer-events: none;
}