:root {
    --z-tpl-btn-width: 19.2rem;
    --z-tpl-btn-hover-color: var(--z-page-primary-color-hover);
}

.tpl-btn {
    width: var(--z-tpl-btn-width);
    height: 5.12rem;
    border-width: 0.16rem;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-style: solid;
    border-color: #000;
    background-color: transparent;
    color: #000;
    position: relative;
}


.tpl-btn:not([disabled]):hover {
    animation: href-hover 0.3s ease forwards;
    color: var(--z-tpl-btn-hover-color);
}

.tpl-btn .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left-style: solid;
    border-left-color: #000;
    width: 4.96rem;
    height: 3.04rem;
    border-left-width: 0.08rem;
}

.tpl-btn .icon-box .icon-arrow {
    width: 0;
    height: 0;
    border-top: 0.48rem solid transparent;
    border-bottom: 0.48rem solid transparent;
    border-left: 0.96rem solid #000;
}

.tpl-btn .text {
    flex-grow: 1;
    text-align: center;
    font-weight: 700;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-btn .tpl-loading {
    width: 30px;
    height: 30px;
    border: 2px solid var(--z-page-primary-color);
    border-top-color: transparent;
    border-radius: 100%;
    animation: rotating infinite 0.75s linear;
    display: none;
}

.tpl-btn.is-loading .tpl-loading {
    display: inline-block;
}

.tpl-btn.is-loading .icon-box .icon-arrow {
    display: none;
}

/*  primary模式颜色 */
.tpl-btn.primary {
    border-color: var(--z-page-primary-color);
    color: var(--z-page-primary-color);
    background-color: #fff;
}

.tpl-btn.primary .icon-box {
    border-left-color:var(--z-page-primary-color) !important;
}

.tpl-btn.primary .icon-box .icon-arrow {
    border-left-color: var(--z-page-primary-color) !important;
}


/*  primary-bg-whit模式颜色 */
.tpl-btn.primary-bg-white {
    background-color: var(--z-page-primary-color) !important;
    border-color: var(--z-page-primary-color) !important;
    color: white !important;    
}

.tpl-btn.primary-bg-white:hover {
    color: rgba(255, 255, 255, 0.6);    
}

.tpl-btn.primary-bg-white .icon-box {
    border-left-color:white !important;
}

.tpl-btn.primary-bg-white  .icon-box .icon-arrow {
    border-left-color: white !important;
}

/* yellow-bg背景色模式 */
.tpl-btn.yellow-bg {
    background-color: var(--z-page-yellow-color);
    border-color: var(--z-page-yellow-color);
}

/* yellow-bg-primary背景色模式 */
.tpl-btn.yellow-bg-primary {
    background-color: var(--z-page-yellow-color) !important;
    border-color: var(--z-page-primary-color) !important;
    color: var(--z-page-primary-color) !important;
}

.tpl-btn.yellow-bg-primary .icon-box {
    border-left-color: var(--z-page-primary-color) !important;
}

.tpl-btn.yellow-bg-primary  .icon-box .icon-arrow {
    border-left-color:  var(--z-page-primary-color) !important;
}

/* white-bg-primary背景色模式 */
.tpl-btn.white-bg-primary {
    background-color: white !important;
    border-color: var(--z-page-primary-color) !important;
    color: var(--z-page-primary-color) !important;
}

.tpl-btn.white-bg-primary .icon-box {
    border-left-color: var(--z-page-primary-color) !important;
}

.tpl-btn.white-bg-primary  .icon-box .icon-arrow {
    border-left-color:  var(--z-page-primary-color) !important;
}

@media screen and (max-width: 768.5px) {
    .tpl-btn {
        font-size: 0.32rem;
        width: 100%;
        height: 1.085rem;
        border-width: 0.04rem;
    }

    .tpl-btn .icon-box {
        width: 1.2rem;
        height: 0.6rem;
        border-left-width: 0.02rem;
    }

    .tpl-btn .icon-box .icon-arrow {
        border-top: 0.1rem solid transparent;
        border-bottom: 0.1rem solid transparent;
        border-left: 0.2rem solid #000;
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}