@import "../styles";

.c-docs-nav {
    @apply bg-backgroundColorA;
    @apply pt-12;

    & .container {
        @apply flex;
    }

    & nav.lhs {
        @apply flex-grow;
        @apply overflow-auto;
    }
    & ul {
        @apply flex items-center;
        @apply whitespace-nowrap;
    }
    & li {
        @apply mr-40;
        @apply border-b-3 border-transparent;
        &:last-child {
            @apply mr-0;
        }
        & a {
            @apply text-16 leading-200 text-textColor6 font-medium;
            @apply block mt-8 mb-8;

            & .c-icon {
                height: 24px;
                width: 24px;
                @apply filter-textColor6;
            }
        }
        &:hover {
            & a {
                @apply text-textColor1;
            }
        }
        &.selected {
            @apply border-adaptivePurple;

            & a {
                @apply text-adaptivePurple;
            }
        }
        &.api {
            & a {
                @apply text-adaptivePurple font-semibold;
            }
        }
    }
}
