/* @import "/assets/css/commonElement/preset.less"; */
button {
    border: none;
    font-family: inherit;
    font-size: inherit;
    box-sizing: content-box;
}

.btn {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 48px;
    line-height: 24px;
}

.btn[class*="btnL"] {
    font: var(--content01);
    padding: 4px 16px;
}

.btn .withIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn .withIcon img {
    display: block;
    width: 20px;
    height: 20px;
}

.btn.btnLfill {
    background: var(--accentPink);
    color: var(--white);
    border: none;
}

.btn.btnLfill:hover {
    background: var(--accentPink);
}

.btn.btnLfill img {
    filter: var(--whiteFilter);
}

.btn.btnLoutline {
    background: transparent;
    border: 1px solid var(--accentPink);
    color: var(--accentPink);
}

.btn.outLine:hover {
    border: 1px solid var(--accentPink);
    color: var(--accentPink);
}

.btn.btnLoutline img {
    filter: var(--accentPinkFilter);
}


/* .btn.disable {
    background-color: @GrayscaleGrayLight;
    color: @GrayscaleWhite;
    border: none;
    cursor: auto;
} */


/* .btn.text {
    background: transparent;
    color: @GrayscaleBlack;
    border: none;
    padding: 8px;
    &:hover {
        color: @PrimaryYellow;
    }
} */


/* .btn.inTextLine {
    font: @content01;
    background: transparent;
    border: 1px solid @PrimaryYellow;
    color: @PrimaryYellow;
    padding: 4px 16px;
    &:hover {
        background: @AccentYellow;
    }
} */


/* 大小網按鈕共存 mobile/wideSite */

.btnBox {
    display: flex;
}


/* 按鈕群組 - 上下排 */

.btnGroup {
    display: grid;
    justify-content: center;
    align-content: center;
    gap: 16px;
    text-align: center;
}


/* 按鈕群組 - 左右排 */

.btnGroup.inline {
    display: flex;
}


/* Tab / 頁籤 */


/* ul.tabPanel {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 0px 20px;
    width: max-content;
    border-bottom: 1px solid @AccentBlue;
    li {
        font: @title06;
        white-space: nowrap;
        width: fit-content;
        a {
            display: block;
            padding: 0 16px;
        }
        &:hover {
            color: @PrimaryBlue;
        }
        &.active {
            border-bottom: 2px solid @PrimaryBlue;
            margin-bottom: -1px;
            a {
                padding: 0 16px 4px;
            }
        }
    }
    &.tabPanelInBox {
        width: auto;
        justify-content: space-around;
    }
    &.tabPanelRowBox {
        width: auto;
        margin: 0 -20px;
        &.owl-carousel .owl-stage-outer {
            overflow: visible;
            Tab 可拉動 > carousel 視覺調整
            需配合外層.wrap或tabPanelBox overflow: hidden;
        }
    }
} */

@media screen and (min-width: 1024px) {
    /* Tab / 頁籤 */
    /* ul.tabPanel li {
         padding: 0 16px;
        &.active {
            padding: 0 16px 8px;
         }
     } */
    .btn[class*="btnL"] {
        padding: 8px 20px;
    }
}