/**
 * MC Button 精简版样式
 * 从 mc-components 库中提取的 MC_Theme_Vanilla 按钮样式
 * 替代完整的 mc-components.min.css (1.73MB → ~4KB)
 */

/* ========== CSS 变量 ========== */
:root {
    --mc-vanilla-green-5: #3C8527;
    --mc-vanilla-green-6: #2A641C;
    --mc-vanilla-grey-2: #D0C5C0;
    --mc-vanilla-grey-3: #ABA09C;
    --mc-core-white: #fff;
    --mc-core-grey-6: #262423;
    --mc-default-focus: #1157BE;
}

/* ========== MC_Button_Primary 基础样式 ========== */
.MC_Button_Primary {
    font-size: 1rem;
    line-height: 1rem;
    min-width: unset; /* 允许项目自定义宽度 */
    padding: 0; /* 允许项目自定义 padding */
    display: inline-flex;
    text-decoration: none;
    border: 2px solid #171615;
    position: relative;
    box-sizing: border-box;
}

.MC_Button_Primary.MC_Glyph_Link_B {
    gap: 12px;
}

.MC_Button_Primary:not([aria-disabled="true"]):before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 6px);
    z-index: 1;
}

.MC_Button_Primary > span {
    display: inline-block;
    margin: 0 auto;
    z-index: 2;
    padding: 2px 0px;
}

.MC_Button_Primary:after {
    z-index: 2;
}

.MC_Button_Primary.MC_Glyph_Link_B {
    padding-right: 1rem;
}

.MC_Button_Primary.MC_Glyph_Link_B > span {
    width: calc(100% - 26px);
}

/* ========== Full Width Button Styles ========== */
.MC_Button_Primary.MC_Button_Style_FullWidth {
    width: 100%;
    max-width: unset;
    justify-content: center;
}

.MC_Button_Primary.MC_Button_Style_FullWidth > span {
    width: unset;
    margin: unset;
}

/* ========== MC_Theme_Vanilla - Green_5 ========== */
.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5,
.MC_Theme_Vanilla .MC_Button_Primary,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5 {
    background: var(--mc-vanilla-green-5);
    box-shadow: inset 0px -6px 0px var(--mc-vanilla-green-6);
    letter-spacing: 0.03em;
    color: var(--mc-core-white);
    font-weight: 600;
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5:hover,
.MC_Theme_Vanilla .MC_Button_Primary:hover,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), var(--mc-vanilla-green-5);
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5:focus,
.MC_Theme_Vanilla .MC_Button_Primary:focus,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5:focus {
    border-radius: 0;
    outline: 2px solid var(--mc-core-white);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), var(--mc-vanilla-green-5);
    box-shadow: 0px 0px 0px 0px var(--mc-core-white), 0 0 0 1px var(--mc-default-focus), inset 0px -6px 0px var(--mc-vanilla-green-6);
    outline-offset: -2px;
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5:active,
.MC_Theme_Vanilla .MC_Button_Primary:active,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5:active {
    background: var(--mc-vanilla-green-6);
    box-shadow: none;
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5:active:focus,
.MC_Theme_Vanilla .MC_Button_Primary:active:focus,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5:active:focus {
    box-shadow: 0 0 0 1px var(--mc-core-white);
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5.MC_Glyph_Link_B::after,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Glyph_Link_B::after,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5.MC_Glyph_Link_B::after {
    background-color: var(--mc-core-white);
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Green_5:before,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Green_5:before {
    box-shadow: 2px 2px 0px 0px rgba(255, 255, 255, 0.20) inset, -2px -2px 0px 0px rgba(255, 255, 255, 0.10) inset;
}

/* ========== MC_Theme_Vanilla - Grey_2 ========== */
.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2 {
    background: var(--mc-vanilla-grey-2);
    box-shadow: inset 0px -6px 0px var(--mc-vanilla-grey-3);
    letter-spacing: 0.03em;
    color: var(--mc-core-grey-6);
    font-weight: 600;
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2:hover,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2:hover {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--mc-vanilla-grey-2);
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2:focus,
.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2:focus-visible,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2:focus,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2:focus-visible {
    border-radius: 0;
    outline: 2px solid var(--mc-default-focus);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--mc-vanilla-grey-2);
    box-shadow: 0px 0px 0px 1px var(--mc-core-white), 0 0 0 1px var(--mc-core-white), inset 0px -6px 0px var(--mc-vanilla-grey-3);
    outline-offset: -2px;
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2:active,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2:active {
    background: var(--mc-vanilla-grey-3);
    box-shadow: none;
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2:active:focus,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2:active:focus {
    box-shadow: 0 0 0 1px var(--mc-core-white);
}

.MC_Theme_Core .MC_Button_Primary.MC_Style_Grey_2.MC_Glyph_Link_B::after,
.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2.MC_Glyph_Link_B::after {
    background-color: var(--mc-core-grey-6);
}

.MC_Theme_Vanilla .MC_Button_Primary.MC_Style_Grey_2:before {
    box-shadow: 2px 2px 0px 0px rgba(255, 255, 255, 0.60) inset, -2px -2px 0px 0px rgba(255, 255, 255, 0.40) inset;
}

/* ========== Disabled Buttons ========== */
[class*="MC_Theme_"] .MC_Button_Primary[aria-disabled="true"] {
    outline: 2px solid var(--mc-vanilla-grey-3) !important;
    background-color: var(--mc-vanilla-grey-1) !important;
    color: var(--mc-vanilla-grey-3) !important;
    box-shadow: inset 0px -6px 0px var(--mc-core-grey-2);
    outline-offset: -2px !important;
}

[class*="MC_Theme_"] .MC_Button_Primary[aria-disabled="true"]:hover,
[class*="MC_Theme_"] .MC_Button_Primary[aria-disabled="true"]:active {
    background: var(--mc-vanilla-grey-1) !important;
    cursor: initial !important;
    box-shadow: inset 0px -6px 0px var(--mc-core-grey-2);
}

[class*="MC_Theme_"] .MC_Button_Primary[aria-disabled="true"]:focus {
    border-radius: 0 !important;
    outline: 2px solid var(--mc-default-focus) !important;
    box-shadow: 0 0 0 1px var(--mc-core-white) !important;
    outline-offset: -2px !important;
}