.srv.v3 {
    --srv-v3-icn-s: 2.5rem;
    --srv-v3-icn-path-1: var(--white);
    --srv-v3-icn-path-2: var(--buttons);

    .srv-icn {
        font-size: var(--srv-v3-icn-s);
    }

    .tab-bar {
        .fnt_t-nt {
            color: hsl(from var(--text-color) h s l / .6);
            transition: color .3s ease 0s;
            padding-bottom: var(--sp-qk);
            padding-inline: 1.11rem;
            z-index: 1;

            --fnt-t-nt-ff: var(--fnt-t);
            font-weight: 700;

            &::before {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2.5px;
                transform: scaleX(0);
                transition: transform .3s ease 0s;
                content: '';
                background-color: var(--buttons);
                z-index: -1;
            }

            &.active {
                color: var(--btn-pry-txt);

                &::before {
                    transform: scaleX(1);
                }
            }

             @media (hover: hover) and (pointer: fine) {
                &:is(:hover, :focus-visible) {
                    color: var(--btn-pry-txt);

                    &::before {
                        transform: scaleX(1);
                    }
                }
            }
        }
    }

    .bg-bx {
        background-color: hsl(from var(--text-color) h s l / .1);
        border: 1px solid hsl(from var(--bdr-clr) h s l / .2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        .btn-cnt {
            border-radius: .44rem;
        }

        .cnt-stl {
            color: hsl(from var(--text-color) h s l / .6)
        }

        .btn svg {
            > path:first-child {
                fill: var(--srv-v3-icn-path-1);
                opacity: 1;
            }

            > path:nth-child(2) {
                fill: var(--srv-v3-icn-path-2);
            }
        }
    }
}