
.wk-route {
    width: 100%;
    height: 100%;
    --wk-height-route-header: 56px;
}

.wk-route-header {
    width: 100%;
    height: var(--wk-height-route-header);
    padding: 0.5rem 0.8125rem;
    display: flex;
    align-items: center;
    background-color: var(--wk-color-secondary);
}

.wk-route-box {
    width: 100%;
    height: calc(100% - var(--wk-height-route-header));
    position: relative;
}

.wk-route-content {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
    position: relative;
    /* opacity: 1; */
    /* transition: opacity 150ms ease-in 0s; */
}

.wk-route-content-route {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-route-content-next {
   width: 100%;
   height: 100%;
   background-color: var(--wk-color-secondary);
   overflow: auto;
   /* transition: opacity 350ms ease-in 0s; */
}

.wk-route-header-close {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-route-header-close:hover {
    background-color: rgb(112,117,121,0.08);
}

.wk-route-header-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-route-header-close-icon,.wk-route-header-close-icon::before,.wk-route-header-close-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: rgb(112,117,121);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-route-header-close-icon::before {
    transform: rotate(90deg);
}

.wk-route-header-close-icon::before ,.wk-route-header-close-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}


.wk-state-back {
    transform: rotate(180deg);
}

.wk-state-back::before {
    transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}




.wk-route-header-title-box {
    color: #999;
   display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1;
}

.wk-route-header-title-box-open {

}

.wk-route-header-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
}

body[theme-mode=dark]  .wk-route-header-title {
    color: white;
}


.wk-route-header-title-box-open .wk-route-header-title{
    display: none;
}

.wk-route-header-title-next {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
    position: absolute;
    opacity: 0;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition),opacity 500ms ease-in 0s;
    width: 180px;

}

body[theme-mode=dark] .wk-route-header-title-next {
    color: white;
}

.wk-route-header-title-box-open .wk-route-header-title-next {
    transform: translate3d(0, 0, 0);
    opacity:1;
}

.wk-route-content-route-open .wk-route-content {
    /* opacity: 0; */
}

.wk-route-content-route-open .wk-route-content-route {
    transform: translate3d(0, 0, 0);
}

.wk-route-content-route-open .wk-route-content-next {
    /* opacity: 1; */
}


.wk-route-header-right-view {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.wk-route-header-right-view-open {
    opacity: 1;
}



