.ops-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: 13px;
    gap: 10px;

    .ops-nav-item {
        margin: 0;
    }

    .ops-nav-item-more,
    .ops-nav-item-less {
        display: none;

        a {
            color: var(--opui--blue);
        }
    }

    .ops-nav-link {
        display: block;
        padding: 10px 25px;
        border-radius: 7px;
        background-color: var(--opui--gray200);
        color: var(--opui--darkgray);
        transition: background-color 300ms;

        &:hover {
            color: var(--opui--white);
            background-color: var(--opui--blue);
            text-decoration: none;
        }

        &.disabled {
            color: #ccc;
            pointer-events: none;
            cursor: default;
        }
    }

    .ops-nav-item.ops-active .ops-nav-link {
        color: var(--opui--white);
        background-color: var(--opui--blue);
    }

    &.ops-nav-pills {
        .nav-link.active,
        .show > .nav-link {
            color: $color__ops-gray;
            background-color: $color__ops-white;
        }
    }

    .ops-hidden {
        display: none;
    }
}