@import '~app/components/ui/colors.scss';
@import '~app/components/ui/fonts.scss';

$toolbarHeight: 50px;

.root {
    height: 100%;
}

.viewPort {
    height: 100%;
    transition: filter 0.4s 0.1s ease;
}

.isPopupActive {
    filter: blur(5px);
}

.wrapper {
    max-width: 756px;
    margin: 0 auto;
}

.toolbar {
    position: fixed;
    top: 0;
    z-index: 100;
    height: $toolbarHeight;
    width: 100%;
    background: $green;
}

.toolbarContent {
    composes: wrapper;
    display: flex;
}

.siteName {
    line-height: 50px;
    padding: 0 20px;
    display: inline-block;
    background: darker($green);
    border-bottom: none;

    font-family: $font-family-title;
    font-size: 33px;
    color: #fff!important; // Important to remove hover effect, which is inherited from the global <a> style
}

.userBar {
    margin-inline-start: auto;
}

.body {
    // TODO: должны ли мы здесь описать базовый шрифт, его размер и базовую линию?
    composes: wrapper;
    position: relative;

    min-height: 100%;
    box-sizing: border-box;

    padding-top: $toolbarHeight; // space for the toolbar
}