SensoFarm/BlazorPages/wwwroot/assets/scss/components/_dashboard.scss

.dashboard{
    min-height: 100%;
}

.cta-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.nav{
    position: sticky;
    background-color: rgba(255,255,255,0.92);
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    width: calc(100% - 2rem);
    @include border-radius(0.6rem);
    display: flex;
    justify-content: space-around;
    @include box-shadow(1px, 2px, 14px, rgba(0,0,0,0.10));
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    a{
        display: flex;
        width: 90px;
        align-items: center;
        flex-direction: column;
        padding: 0.6rem 0;
        text-decoration: none;
        position: relative;
        span{
            color: #A1A1A1;
            font-size: 0.9rem;
        }
        &::after{
            content: "";
            height: 3px;
            background-color: transparent;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            @include border-radius(3px);
        }

        &.active{
            img{
                filter: invert(69%) sepia(23%) saturate(866%) hue-rotate(88deg) brightness(89%) contrast(92%);
            }
            span{
                color: $black;
            }
            &::after{
                background-color: $secondary;
            }
        }
    }
}