@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';

nav {
    height: 54px;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    z-index: 997;

    @include themify {
        box-shadow: 0 3px 6px themed('navShadow');
    }

    .container {
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .right {
        width: max-content;
        margin-left: auto;
    }

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }

        &.outline {
            padding: 2px;
            border: 2px solid $primary-color;
        }
    }

    // flavours
    &.flat {
        &-lg {
            @include laptop-and-up {
                box-shadow: none;
                // border-bottom: 1px solid $grey-light-3;

                @include themify {
                    border-bottom: 1px solid themed('navShadow');
                }
            }
        }
    }
}