@import '../../theme';

@prefix-cls: ~'@{ra-lib-prefix}-layout-mobile-header';

.@{prefix-cls} {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: @layout-z-index;
    display: flex;
    align-items: center;
    background: #fff;
    overflow: hidden;

    &.dark {
        background-color: @layout-header-background;
        color: #fff;

        .@{prefix-cls}-content {
            border-bottom: none;
        }
    }

    &-drawer {
        display: flex;
        flex-direction: column;

        &.dark {
            .@{ant-prefix}-drawer-body {
                background-color: @layout-header-background;
            }
        }
    }

    &-logo {
        flex: 0;
    }

    &-menu {
        flex: 1;
        overflow: scroll;
    }


    &-content {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        border-bottom: 1px solid #e8e8e8;

        h1 {
            padding: 0;
            margin: 0;
            font-size: 18px;
            text-align: center;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &.dark {
            h1 {
                color: #fff;
            }
        }

    }
}