bizfile/src/app/tabs/tabs.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;

        @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;
        }

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

.notifications-window {
    position: fixed;
    top: calc(#{$header-height} - 1rem);
    background-color: white;
    width: 40rem;    
    box-shadow: 0px 0px 15px -3px var(--dark-grey);
    z-index: 2;
    right: 26rem;
    border-radius: 1.5rem;
    overflow: hidden;


    header {
        height: 5rem;
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;        
        width: calc(100% - 2rem);
        border-radius: 1rem;
        margin: 1rem auto 0;
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--border-grey);
            opacity: 0.7;
        }
    
        h4{
            position: relative;
            font-size: 1.7rem;
            color: var(--primary);
            font-weight: 500;
        }
    }

    .backdrop {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vw;
        z-index: 0;
    }
}

.page {
    height: calc(100vh - #{$header-height});
    margin: 0 auto;
    overflow: auto;
    width: calc(100% - 4rem);

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