.app-navbar {
    display    : flex;
    align-items: center;
    width      : 100%;
    border-top : 1px solid #f2f2f2;
    padding-top: 8px;

    &__arrow {
        line-height: 0;
        padding    : 0 16px;
        cursor     : pointer;
        color      : #999;

        &:hover {
            color: #000;
        }

        .g-icon {
            &--arrow-left:before {
                content: var(--icon-arrow-left);
            }

            &--arrow-right:before {
                content: var(--icon-arrow-right);
            }
        }
    }

    &__container {
        flex    : 1;
        overflow: hidden;

        &:first-child {
            margin: 0 20px;
        }
    }

    &__tab {
        display    : flex;
        white-space: nowrap;
        transition : transform 200ms;

        &-item {
            display                : flex;
            align-items            : stretch;
            height                 : 40px;
            cursor                 : pointer;
            border-top-left-radius : 4px;
            border-top-right-radius: 4px;

            &.is-active {
                background-color: var(--tabbar-active);

                span {
                    color: #fff;
                }
            }

            .text {
                display        : flex;
                justify-content: center;
                align-items    : center;
                padding-left   : 20px;
                color          : #777;

                // 既是最后一个，又是第一个
                &:last-child:first-child {
                    padding-right: 20px;
                }
            }

            .icon {
                display        : flex;
                justify-content: center;
                align-items    : center;
                width          : 40px;
                height         : 100%;

                .g-icon--close {
                    &:before {
                        content   : var(--icon-close-filled);
                        transition: color 200ms;
                    }

                    &:hover:before {
                        color: var(--tabbar-close-hover) !important;
                    }
                }
            }

            &:not(.is-active) {
                .icon {
                    width     : 20px;
                    color     : transparent;
                    transition: width 200ms;
                }

                &:hover {
                    background-color: var(--tabbar-hover);

                    .text {
                        color: #313b46;
                    }

                    .icon {
                        width: 40px;
                        color: var(--tabbar-active);
                    }
                }
            }
        }
    }
}