@import '../variables.scss';

.main-header {
    a {
        text-decoration: none;
    }

    h1 {
        font-weight: 800;
        margin-left: 11px;

        a {
            color: $color-main;
        }
    }

    mat-icon {
        cursor: pointer;
        display: inline-block;

        @include tablet {
            display: none;
        }
    }

    ul li {
        display: inline-block;
        font-size: 0.8em;
        list-style-type: none;
        margin-left: 25px;

        &.user-nav {
            margin-right: -30px;

            @include tablet {
                margin-right: 0;
            }
        }

        &.cart-nav {
            margin-left: -20px;

            @include tablet {
                margin-left: 15px;
            }
        }

        &.search-nav {
            margin-left: 15px;
            margin-right: 35px;

            @include tablet {
                margin-right: 0;
            }

            mat-icon {
                display:  inline-block;
                transform: translateY(7px);
            }
        }
    }

    .nav-item {
        display: none;

        @include tablet {
            display: inline-block;
        }
    }
}

.fill-space {
    flex: 1 1 auto;
}

.user-photo {
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    transition: transform .3s ease-out;
    width: 45px;

    &:hover {
        transform: scale(1.1);
    }
}

.mobile-nav {
    box-sizing: border-box;
    min-width: 50%;
    padding: 60px 20px 30px 20px;

    .mobile-nav-item {
        margin: 20px 0;
    }
}

.search {
    padding: 0px 20px;
}