/*
========================
button
========================
*/
.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border: none;
    border-radius: calc(infinity * 1px);
    text-decoration: none;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(infinity * 1px);
    z-index: -1;
    transition: all 0.3s ease;
}

.btn:active {
    transform: scale(0.93);
}

.btn:hover::before {
    background: #FFF;
    opacity: 0.15;
    z-index: 3;
}

.btn_text {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    max-width: 100%;
}

.btn_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
========================
Size: xs
========================
*/
.btn_xs {
    padding: 8px 12px;
    gap: 6px;
}
.btn_xs .btn_text {
    font-size: var(--wp--custom--text--size--xxs);
}
.btn_xs .btn_icon svg {
    width: 12px;
    height: 12px;
}
@media screen and (min-width: 780px) {}
@media screen and (min-width: 1280px) {}

/*
========================
Size: sm
========================
*/
.btn_sm {
    padding: 8px 12px;
    gap: 6px;
}
.btn_sm .btn_text {
    font-size: var(--wp--custom--text--size--xs);
}
.btn_sm .btn_icon svg {
    width: 16px;
    height: 16px;
}
@media screen and (min-width: 780px) {}
@media screen and (min-width: 1280px) {}

/*
========================
Size: md
========================
*/
.btn_md {
    padding: 12px 20px;
    gap: 8px;
}
.btn_md .btn_text {
    font-size: var(--wp--custom--text--size--xs);
}
.btn_md .btn_icon svg {
    width: 18px;
    height: 18px;
}
@media screen and (min-width: 780px) {}
@media screen and (min-width: 1280px) {}

/*
========================
Size: lg
========================
*/
.btn_lg {
    padding: 12px 20px;
    gap: 8px;
}
.btn_lg .btn_text {
    font-size: 12px;
}
.btn_lg .btn_icon svg {
    width: 20px;
    height: 20px;
}
@media screen and (min-width: 1280px) {
    .btn_lg {
        padding: 12px 24px;
        gap: 12px;
    }

    .btn_lg .btn_text {
        font-size: var(--wp--custom--text--size--sm);
    }

    .btn_lg .btn_icon svg {
        width: 20px;
        height: 20px;
    }
}