@use "@infineon/design-system-tokens/dist/tokens";

.ifx__content-nav-default {
  flex-wrap: nowrap;
  overflow-x: auto;
  font-size: 13px;

  @media (min-width: 576px) { 
    font-size: 16px;
  }
  
  & .nav-link {
    white-space: nowrap;
    color: tokens.$color-text-black;
    padding: 4px calc(8px + 4px);

    @media (min-width: 576px) {
      padding: 8px calc(16px + 4px);
    }

    &:hover {
      color: tokens.$color-default-500;
      background-color: tokens.$color-gray-200;
    }

    &.active {
      color: tokens.$color-default-500;
      background-color: tokens.$color-bg-white;
      padding: 4px 8px;

      @media (min-width: 576px) {
        padding: 8px 16px;
      }
    }
  }

  & .nav-link.disabled {
    color: tokens.$color-gray-200;
  }
}

.ifx__content-nav-default:not(.flex-column) {
  & .nav-link {
    &.active {
      border-bottom: 4px solid tokens.$color-default-500;
    }
  }
}

.ifx__content-nav-default.flex-column {
  display: inline-block;

  & .nav-link {
    &.active {
      border-left: 4px solid tokens.$color-default-500;
    }
  }
}

.nav-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  font-size: 13px;

  @media (min-width: 576px) { 
    font-size: 16px;
  }

  & .nav-item.show .nav-link {
    background-color: transparent;
  }

  .nav-item {
    margin-right: 4px;

    &:last-of-type {
      margin-right: 0;
    }

    @media (min-width: 576px) { 
      margin-right: 10px;

      &:last-of-type {
        margin-right: 0;
      }
    }

    & .nav-link {
      white-space: nowrap;
      padding: 8px 16px;
      color: tokens.$color-text-black;
      border-radius: 100px;

      &:hover {
        color: tokens.$color-default-500;
        background-color: tokens.$color-gray-200;
      }
    }
  
    & .nav-link.active {
      color: tokens.$color-text-white;
      background-color: tokens.$color-default-500;
    }
  
    & .nav-link.disabled {
      color: tokens.$color-gray-200;
    }
  }
}

.nav-pills.flex-column {
  display: inline-block;

  @media (min-width: 576px) { 
    font-size: 16px;
  }

  .nav-item {
    margin: 0 0 6px 0;

    &:last-of-type {
      margin-bottom: 0;
    }

    @media (min-width: 576px) { 
      margin: 0 0 12px 0;
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .nav-link {
    display: inline-block;
  }
}