// este es un componente usado en varios sitios de la web, cuidado con tocarlo para un solo caso porque afectara a distintas paginas
.simple-tabs {
  border: 0;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
  vertical-align: top;
  text-align: left;
  display: block;
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  > li {
    margin-bottom:0;
    z-index: 2;
    float: none;
    display: inline-block;
    vertical-align: bottom;
    > a, button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 50px;
      max-width: 175px;
      white-space: normal;
      text-align: center;
      color: $brand-copy-light;
      font-size: $font-size-base;
      font-weight: $roboto-light;
      line-height: 1.3;
      padding: 0 15px 1px;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid $brand-grey-medium;
      margin-right: 0;
      text-decoration: none;
      transition: color $transition-time, border-color $transition-time;
      &:focus,
      &:hover {
        color: $brand-grey-dark;
        font-weight: $roboto-light;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid $brand-primary;
        padding-bottom: 0;
      }
    }
    &.active {
      > a,
      > a:focus,
      > a:hover {
        color: $brand-grey-dark;
        @include medium-weight;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid $brand-primary;
        padding-bottom: 0;
      }
    }
  }
}

/* Tabs para categorías */
.simple-tabs-container {
  display: inline-flex;
  width: 100%;
  flex-wrap: nowrap;
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }

  .simple-tabs-block {
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    flex: 1 1 auto;
  }
 .simple-tabs-button-hide {
    display: none;
  }

  .simple-tabs-button {
    background-color: transparent;
    padding: 9px 8px;
    vertical-align: middle;
    flex: 0 0 35px;
    svg {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      [dir='rtl'] & {
        transform: rotate(180deg);
      }
      &, & * {
        fill: $brand-copy-light;
      }
    }
  }
  .simple-tabs > li > a {
    width: 175px;
  }
}