/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
@use '../../utils/mixins';
@use '../tabs/variables.tabs' as tabs-variables;
@use 'variables.subnav' as subnav-variables;
@use '../tabs/tabs.clarity' as tabs;
@use '@cds/core/tokens/tokens.scss';
@use '../../utils/variables/variables.density' as density;

@include mixins.exports('nav.clarity') {
  .nav {
    display: flex; //For the elements inside the nav
    height: subnav-variables.$clr-subnav-height;
    list-style-type: none;
    align-items: center;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    box-shadow: subnav-variables.$clr-nav-shadow;
    gap: density.$clr-base-gap-l;

    .nav-item {
      display: inline-block;

      &.active > .nav-link {
        color: tabs-variables.$clr-nav-link-active-color;
        box-shadow: subnav-variables.$clr-nav-shadow;
      }
    }

    .nav-link {
      position: relative;
      color: tabs-variables.$clr-nav-link-color;
      @include mixins.generate-typography-token('BODY-14-RG-STD');
      padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-m;
      display: flex;

      //Clarity Buttons as .nav-links in .nav
      &.btn {
        text-transform: none;
        //-1px to account for the border of the button
        margin: 0 0 calc(-1 * #{tokens.$cds-global-space-1});
        border-radius: 0;
      }

      &.dropdown-toggle {
        padding: 0 density.$clr-base-horizontal-offset-m;
        cds-icon {
          color: tabs-variables.$clr-nav-link-color;
        }
      }

      &:hover,
      &:focus,
      &:active {
        color: inherit;
      }

      // TODO - separate :active and .active, currently .active is being used for selected state.
      &:active {
        background-color: tabs-variables.$clr-nav-active-bg-color;
      }

      &:hover,
      &.active {
        @include tabs.nav-link-border-appearence('bottom');
      }

      &:hover,
      &:focus,
      &:active,
      &.active {
        text-decoration: none;
      }
      &.active {
        &:hover {
          background-color: tabs-variables.$clr-nav-selected-hover-background-color;
        }
        &:active {
          background-color: tabs-variables.$clr-nav-selected-active-background-color;
        }
        color: tabs-variables.$clr-nav-link-active-color;
      }
    }
  }
}