@import '../base/helpers';

som-tabs {
  position: relative;
  display: block;
}

som-tab-panel-group {
  position: relative;
  display: block;
}

.tablist {
  box-sizing: border-box;
  display: flex;
  //flex-wrap: wrap;
  white-space: nowrap;
  overflow-x: hidden;
  padding-top:2px;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: none;

  @media (hover: none) {
    overflow-x: auto;
  }

  &.underline {
    &::after {
      content: " ";
      position: absolute;
      //z-index: -1;
      top: 37px;
      left: 1rem;
      right: 1rem;
      border-bottom: 1px solid #d0d0d0;
    }
  }

  &.underline {
    &::after {
      content: " ";
      position: absolute;
      //z-index: -1;
      top: 37px;
      left: 1rem;
      right: 1rem;
      border-bottom: 1px solid #d0d0d0;
    }
  }

  &.scrollLeft {
    margin-left: 2.5rem;
    width: calc(100% - 2.5rem);

    .tab-previous {
      position: absolute;
      left: 0;
      top: -2px;
      z-index: 2;
    }

    &.scrollRight {
      margin-left: 2.5rem;
      width: calc(100% - 5rem);
    }
  }

  &.scrollRight {
    margin-left: 0;
    width: calc(100% - 2.5rem);

    .tab-next {
      position: absolute;
      right: 0;
      top: -2px;
      z-index: 2;
    }
  }

  /*********
  * TAB
  **********/
  // Default Tab (not contained)
  .tab {
    border:none;
    background-color: transparent;
    display: block;
    margin-left: 2px; //account for focus ring
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
    color: $gray-50;
    border-bottom: 4px solid transparent;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    z-index:1;

    &:after{
      position: absolute;
      display: block;
      content: '';
      width: 0;
      height: 4px;
      background-color: $primary;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      transition: all .3s;
      z-index: 1;
    }

    &.scrollable {
      margin-top: .2rem;
    }

    &:hover {
      cursor: pointer;
      &:after{
        width: 100%;
      }
    }

    &:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 2px $teal;
    }

    &.active {
      color: $header-copy;

      &:after{
        width: 100%;
      }
    }

    &.dark {
      color: $smoke;

      &:after {
        background-color: $light-teal;
      }

      &.active {
        color: $white;
      }

      &:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 2px $light-teal;
      }
    }

  }


  // Contained Tabs
  &.contained {
    padding-top: 4px;

    &.scrollLeft {
      .tab-previous {
        top: .5rem;
      }
    }

    &.scrollRight {
      .tab-next {
        top: .5rem;
      }
    }

    // Underline
    &::after {
      content: " ";
      position: absolute;
      //z-index: -1;
      top: 48px;
      left: 0;
      right: 0;
      border-bottom: 1px solid $border-color;
      transform: none;
      transition: all 0s;
    }

    .tab {
      border: 1px solid transparent;
      border-top: 4px solid transparent;
      border-bottom-color: transparent;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      background-color: transparent;
      display: block;
      padding: .5rem 1rem;
      color: $gray-50;
      @include font-weight($font-weight-medium);
      text-decoration: none;
      position: relative;
      z-index:1;
      margin:0;
      transition: all 0s;

      &:after {
        display: none;
      }

      &:hover {
        background-color: $white;
        border-bottom-color: $border-color;
        color: $header-copy;
        height: calc(100% - 1px);
      }

      &:focus-visible {
        border-color: $primary!important;
        border-bottom-color: transparent;
//        outline: 2px solid white;
        box-shadow: inset 0 0 0 1px $primary;
        background: $white;
        color: $header-copy;
      }

      &.active {
        background: white;
        border-color: $border-color;
        border-top-color: $primary;
        border-bottom-color: transparent;
        color: $header-copy;
      }

      &.tab-panel-gray {
        &:hover {
          background-color: $light-gray;
          &:after {
            background-color: $light-gray;
          }
        }

        &.active {
          background-color: $light-gray;
        }
      }


      &.dark {
        color: rgba($smoke, .8);

        &.active {
          color: $header-copy;
          border-top-color: $light-teal;

          &:hover {
            background-color: $white;
            color: $header-copy;
          }
        }

        &:hover {
          background-color: rgba($white, .1);
          color: $white;
        }

        &:focus-visible {
          border-color: $primary!important;
          border-bottom-color: transparent;
          outline: 2px solid white;
          box-shadow: inset 0 0 0 1px $primary;
          background: $white;
          color: $header-copy;
        }

        &.tab-panel-gray {
          &.active {
            &:hover {
              background-color: $light-gray;
            }
          }
        }
      }
    }
  }
}


.tab-panels {
  &.white {
    background-color: $white;
  }
  &.gray {
    background-color: $light-gray;
  }
  &.transparent {
    background-color: transparent;
  }
}
.tab-content-container {
  // @include transition(opacity, 0.15s);
  .tab-pane {
    display: none;

    &.active {
      display: block;
    }
  }
}