.chaty-header {
    
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 25px;

    @include mobile {
        padding: 10px 15px;
    }

    .chaty-app-tabs {
        padding: 0 30px;
    }

    li {
        @apply w-full;
        align-self: normal;

        a::after {
            content: '';
            height: 2px;
            position: absolute;
            top: 22px;
            z-index: 0;
            @apply bg-cht-gray-150/40;
        }

        a:is(.active, .completed) {
            &::after {
                @apply bg-cht-primary;
            }

            .chaty-tabs-subheading {
                @apply text-cht-primary;
            }
        }

        &:nth-child(1) {
            a {
                &::after {
                    width: 50%;
                    right: 0;
                }
            }
        }

        &:nth-child(2) {
            a {
                &::after {
                    width: 100%;
                    right: 0;
                }
            }
        }

        &:nth-child(3) {
            a {
                &::after {
                    width: 50%;
                    left: 0;
                }
            }
        }
    }

    .chaty-tab {
        @apply font-primary text-cht-gray-150 relative pt-10 bg-white inline-block w-full px-4 rounded-lg text-center h-full;
        font-size: 14px;
        padding-bottom: 7px;

        &::before {
            display: inline-block;
            width: 1.9rem;
            content: '';
            height: 1.9rem;
            margin-bottom: 0.125rem;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            z-index: 1;
            transform: translate(-50%, -33px);
            background-color: #83a1b7;
        }

        &.active {
            @apply text-cht-primary
        }

        &:is(.active, .completed)::before {
            @apply bg-cht-primary
        }

        &:hover {
            @apply bg-cht-primary/20
        }
    }
}