@import '../../../packages/arcodesign/style/mixin.less';

* {
    box-sizing: border-box;
}

body {
    background-color: @card-background-color;
    font-family: -apple-system, PingFang SC, Helvetica Neue;
    &.white-body {
        background-color: @background-color;
    }
    &.arco-theme-dark {
        background-color: #141414;
        &.white-body {
            background-color: @dark-background-color;
        }
    }
}

body,
.arcodesign-mobile-home-wrapper,
.arcodesign-mobile-demo-wrapper {
    &::-webkit-scrollbar {
        display: none;
    }
}

.arcodesign-mobile-home-wrapper,
.arcodesign-mobile-demo-wrapper {
    width: 100%;
    font-size: 0;
    &.hide-header {
        .arcodesign-mobile-demo-nav-inner,
        .arcodesign-demo-logo img {
            display: none;
        }
    }
    .demo-content {
        box-sizing: border-box;
    }
    .status-bar {
        height: 20px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
        & + .demo-content {
            .arcodesign-mobile-demo-nav {
                height: 64px;
            }
            .arcodesign-mobile-demo-nav-inner {
                padding-top: 20px;
            }
        }
    }
}
.arcodesign-mobile-demo-nav {
    height: 44px;
    width: 100%;
    &-inner {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 10;
        .use-var(background-color, background-color);
        .use-var(color, font-color);
        width: inherit;
        height: inherit;
        text-align: center;
        font-weight: bold;
        font-size: 17px;
        line-height: 44px;
        .onepx-border-var(bottom, line-color);
    }
}

.arcodesign-demo-logo {
    .rem(padding, 52, 16, 40);
    svg {
        .rem(width, 200);
        .rem(height, 70);
    }
}

.arcodesign-demo-menu {
    .rem(padding, 0, 16, 28);
    .use-var(color, font-color);
    .menu-wrap-title {
        .rem(font-size, 14);
        .rem(line-height, 20);
        .rem(margin-bottom, 12);
        .rem(padding-left, 16);
        position: relative;
        color: #939aa3;
        &::before {
            content: " ";
            display: inline-block;
            width: 2px;
            .rem(height, 12);
            border-radius: 2px;
            .use-var(background, primary-color);
            .rem(margin, 0, 6, 0, 8);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .menu-item {
        .rem(padding, 12, 16);
        .rem(font-size, 16);
        .rem(line-height, 22);
        position: relative;
        .use-var(background, card-background-color);
        cursor: pointer;
        .rem(border-radius, 8);
        &:not(:last-child) {
            .rem(margin-bottom, 8);
        }
        .arrow {
            position: absolute;
            .rem(right, 12);
            top: 50%;
            transform: translateY(-50%);
            color: #c9cdd4;
        }
    }
}

.arcodesign-mobile-title {
    .rem(padding, 32, 16, 8);
    .rem(font-size, 14);
    .use-var(color, sub-info-font-color);
    font-weight: normal;
    .arcodesign-mobile-demo-nav + & {
        .rem(padding-top, 8);
    }
}

.arcodesign-mobile-demo-content {
    .rem(padding, 16);
    .use-var(background-color, container-background-color);
}

.demo-content {
    padding-bottom: 24px;
}

.arrow-back {
    .rem(width, 44);
    .rem(height, 44);
    position: fixed;
    left: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    .use-var(color, font-color);
    .rem(font-size, 20);
    cursor: pointer;
}
