MetaPhase-Consulting/State-TalentMAP

.navTabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;

  .tab:hover:not(.tab-active) {
    cursor: pointer;
  }

  &.heavyBorderTop {
    background-color: $bg-gray-medium-4;
    border-bottom: 3px solid $color-black;

    .tab {
      background-color: $bg-gray-medium-4;
      border-right: 1px solid $bg-gray-dark-2;
      border-top: 3px solid $bg-gray-medium-4;
      font-size: 13px;
      padding: 5px 10px;
      text-align: center;
    }

    .tab {
      &.disabled {
        background-color: $bg-gray-medium-3;
        color: $bg-gray-dark-2;
        cursor: default !important;

        &:hover {
          background-color: $bg-gray-medium-3 !important;
          color: $bg-gray-dark-2 !important;
          border-top: 3px solid $bg-gray-medium-3 !important;
        }
      }
    }

    // special styling for first tab
    #asgh-tab-container {
      .tab {
        border-left: 1px solid $bg-gray-dark-2;
      }
    }

    .tab-active {
      color: $dos-blue;
      background-color: $color-white;
      border-top: 3px solid $dos-blue;
    }

    .tab:hover:not(.tab-active) {
      color: $color-black;
      background-color: $bg-gray-medium-2;
      border-top: 3px solid $bg-gray-medium-2;
    }
  }

  &.lightBorderBottom {
    border-bottom: 1px solid $bg-gray-dark-2;

    .tab {
      padding: 5px 10px 8px;
      font-size: 1.6rem;
      text-align: center;
    }

    .tab {
      &.disabled {
        color: $bg-gray-dark-1;

        &:hover {
          cursor: default;
          color: $bg-gray-dark-1 !important;
          background-color: transparent !important;
        }

      }
    }

    .tab-active {
      color: black;
      border-bottom: 3px solid $primary-blue;
      padding: 5px 10px;
      font-weight: 500;
    }

    .tab:hover:not(.tab-active) {
      color: $color-black;
      background-color: $bg-gray-medium-3;
    }
  }
}

.navDropdown {
  background-color: $dos-blue;
  display: grid;
  justify-content: center;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;

  label {
    margin-top: 0;
  }

  .dd-style {
    select {
      font-size: 13px;
      padding: 5px 10px 5px;
    }
  }
}