$tabs-font-size: $label-font-size !default;
$tabs-font-family: $font-family-base !default;
$tabs-selected-color: $primary !default;

.tabs-wrapper {
  position: relative;

  &:before {
    content: '';
    width: $spacing-md;
    height: calc(100% - 5px);
    position: absolute;
    background: linear-gradient(90deg, $light 0%, rgba($light, 0) 100%);
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 9;
  }
  &:after {
    content: '';
    width: $spacing-md;
    height: calc(100% - 5px);
    position: absolute;
    background: linear-gradient(-90deg, $light 0%, rgba($light, 0) 100%);
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
  }
}

.tabs {
  display:flex;
  flex-wrap: nowrap;
  margin:0;
  padding:0;
  border-bottom: 2px solid $light-gray-2;
  list-style:none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  .tabs__tab {
    color:inherit;
    text-decoration:none;
    -webkit-appearance:none;
      -moz-appearance:none;
            appearance:none;
    margin:0;
    border: 0;
    background: none;
    font-size: $tabs-font-size;
    text-transform: initial;
    letter-spacing: initial;
    color: $dark-gray-2;
    position: relative;
    justify-content: center;
    width: 100%;
    min-width: 100%;
    padding: 0 $spacing-lg;
    outline: none;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      .tabs__title {
        border-bottom: 3px solid $light-gray-1;
      }

    }
  }

  .tabs__tab-container {
    display: flex;
    margin: 0;
    padding: 0;

    &.tabs__tab-container--selected{
      .tabs__title {
        color: $dark;
        border-bottom: 3px solid $tabs-selected-color;
      }
    }
  }

  .tabs__title {
    display:block;
    padding: $spacing-sm 0;
    border-bottom: 3px solid transparent;
    min-width: 5rem;
  }

  @media screen and (max-width: breakpoint('sm')) {
    .tabs__tab {
      padding: 0;
    }

    .tabs__tab-container {
      background: $light-gray-3;
      padding: 0;

      &.tabs__tab-container--selected {
        background: $light;
        box-shadow: $box-shadow-md;
      }
    }

    .tabs__title {
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: $spacing-md;
      padding-right: $spacing-md;
    }
  }
}

.tabs-fitted {
  .tabs {
    .tabs__tab-container {
      flex: 1 1 auto;

      .tabs__tab {
        padding: 0;
      }
    }
  }
}