bizfile/src/app/layout/navbar/navbar.component.scss

$header-height: 10rem;

.navbar {
    display: flex;
    width: 100%;
    height: $header-height;
    align-items: center;
    justify-content: flex-start;

    .logo {
        width: 12rem;
        margin: 0 2rem;

        img {
            width: 100%;
            height: 100%;
        }
    }

    nav {
        margin: 0 2rem;
        
        @media print {
            display: none;
        }

        a {
            font-size: 1.6rem;
            letter-spacing: 0.5px;
            color: var(--dark-grey);
            margin-right: 2rem;

            &.active {
                text-decoration: underline;
                color: var(--highlight);
            }

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .search-input {
        position: relative;
        margin-left: auto;

        @media print {
            display: none;
        }

        input {
            display: block;
            height: 5rem;
            border: 1px solid var(--border-grey);
            border-radius: 4rem;
            padding: 0 2.5rem;
            width: 35rem;
            font-size: 1.5rem;
            font-weight: 300;

            &::placeholder {
                color: var(--dark-grey);
                opacity: 0.6;
            }
        }

        img {
            position: absolute;
            width: 1.8rem;
            top: 1.5rem;
            right: 1.8rem;
        }
    }


    .notification-button {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        border: none;
        position: relative;
        background-color: white;
        margin-left: 2rem;

        @media print {
            display: none;
        }

        &.active {
            box-shadow: 0px 0px 10px -3px var(--primary);
            
            img {
                filter: brightness(500%);
            }

            .badge {
                transform: scale(0);
            }

            &::before {
                background-color: var(--highlight);
                opacity: 1;
                filter: none;
            }
        }

        &:hover {
            box-shadow: 0px 0px 10px -3px var(--primary);
        }

        .badge {
            background-color: var(--highlight);
            color: white;
            font-size: 1.1rem;
            border-radius: 7px;
            position: absolute;
            right: 0;
            top: -0.5rem;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            transition: transform 0.1s;
        }

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--secondary);
            opacity: 0.3;
            filter: brightness(110%);
            border-radius: 50%;
        }

        & > * {
            position: relative;
        }

        img {
            width: 40%;
            height: 40%;
        }
    }

    .profile-actions {
        margin: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 5rem;
        border-radius: 4rem;
        padding: 0 2rem;
        position: relative;
        overflow: hidden;
        width: 20rem;
        cursor: pointer;

        @media print {
            display: none;
        }
        
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--secondary);
            opacity: 0.3;
            filter: brightness(110%);
        }

        & > * {
            position: relative;
        }

        img {
            width: 1.5rem;

            &.logout-icon {
                transform: scale(1.5);
            }
        }

        span {
            margin: 0 auto;
            color: var(--primary);
            font-size: 1.4rem;
        }
    }
}