/** @component tabs */

@include exports('md-tab') {
  .#{$prefix}-tab__list {
    padding-left: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-size: rem-calc(14);
    list-style: none;

    @include clearfix;

    .#{$prefix}-tab__item {
      position: relative;
      display: block;

      >a {
        position: relative;
        display: block;
        padding: $tab--link__padding;

        &:hover,
        &:focus {
          text-decoration: none;
          background-color: $tab--link-hover__bg;
        }
      }

      &.disabled>a {
        color: $tab--disabled-link__color;

        &:hover,
        &:focus {
          color: $tab--disabled-link-hover__color;
          text-decoration: none;
          cursor: $cursor-disabled;
          background-color: transparent;
        }
      }
    }

    .open>a {

      &,
      &:hover,
      &:focus {
        background-color: $tab--link-hover__bg;
        border-color: $link-color;
      }
    }

    .nav-divider {
      @include nav-divider;
    }

    >.#{$prefix}-tab__item>a>img {
      max-width: none;
    }
  }

  .#{$prefix}-tab--pills {
    .#{$prefix}-tab__list {
      display: flex;
    }

    .#{$prefix}-tab__item {
      min-width: 200px;
      text-align: center;

      >a {
        padding: $tab-pills__padding;
        font-size: $tab-pills__font-size;
        line-height: 1.5;
        color: $tab-pills__color;
        background: $tab-pills__background;
        border: $tab-pills__border;
        background-clip: padding-box;

        &:hover {
          background: $tab-pills--hover__background;
        }
      }

      &.active {

        >a,
        a:hover,
        a:focus {
          background: $tab-pills--active__background;
        }
      }

      &.disabled {
        pointer-events: none;

        >a,
        &:hover,
        &:focus {
          background: $tab-pills__background;
        }
      }

      &:first-child {
        >a {
          @include border-left-radius(20px);
        }
      }

      &:last-child {
        >a {
          @include border-right-radius(20px);
        }
      }
    }

    .md-tab__list {
      md-tab:first-child {
        >li>a {
          @include border-right-radius(0px);
        }
      }

      md-tab:last-child {
        >li>a {
          @include border-left-radius(0px);
        }
      }

      md-tab:not(:first-child):not(:last-child) {
        >li>a {
          border-radius: 0px;
        }
      }
    }
  }

  .#{$prefix}-tab--justified {
    >.#{$prefix}-tab__list {
      display: flex;
      width: 100%;
    }

    .#{$prefix}-tab__item {
      +.#{$prefix}-tab__item {
        margin-left: 0;
      }
    }

    &.#{$prefix}-tab--pills,
    &.#{$prefix}-tab--tabs {
      .#{$prefix}-tab__item {
        flex-grow: 1;
      }
    }

    .dropdown .dropdown-menu {
      top: auto;
      left: auto;
    }
  }

  .#{$prefix}-tab__content {
    width: 100%;
    background-color: $md-white-100;
    border: 1px solid $md-gray-10;
    border-top: none;
  }

  .#{$prefix}-tab__pane {
    display: none;

    &.active {
      display: block;
    }
  }

  .#{$prefix}-tab--tabs {
    >.#{$prefix}-tab__list {
      margin-bottom: 17px;
      border-bottom: 0px;
    }

    .#{$prefix}-tab__item {
      float: left;

      >a {
        padding-right: 30px;
        padding-bottom: 9.5px;
        padding-left: 0;
        margin-right: 12px;
        color: $md-gray-90;
        text-align: left;
        cursor: pointer;
        border: 0px;
        border-bottom: 1px solid $md-gray-30;
        border-radius: 0px;

        &:hover {
          padding-bottom: 8px;
          background-color: transparent;
          border-bottom: $tab-tabs--hover__border;
          transition: border-bottom-color 0.5s ease;
        }

        &:focus {
          box-shadow: none;
        }
      }

      &.active>a {

        &,
        &:hover,
        &:focus {
          padding-bottom: 8px;
          color: $tab-tabs--active__color;
          cursor: default;
          background-color: transparent;
          border: 0px;
          border-bottom: $tab-tabs--active__border;
          transition: border-bottom-color 0.5s ease, color 0.5s ease;
        }
      }
    }

    .center & {
      display: flex;
      justify-content: center;

      .#{$prefix}-tab__item>a {
        padding-right: 15px;
        padding-left: 15px;
      }
    }

    &.#{$prefix}-tab--justified>.#{$prefix}-tab__list {
      @extend .#{$prefix}-tab--justified;
      @extend .#{$prefix}-tab--tabs;
    }

    &.#{$prefix}-tab--stacked {
      .#{$prefix}-tab__item {
        a {
          padding-left: 0;

          &:hover {
            background-color: transparent;
          }
        }

        &:not(.active) a:hover {
          padding-bottom: 6px;
        }

        &.active a {
          padding-bottom: 6px;
        }
      }
    }
  }

  .#{$prefix}-tab--tabs,
  .#{$prefix}-tab--subnav {
    .#{$prefix}-tab__item {
      padding-left: 8px;

      a {
        padding-right: 0px;
        padding-left: 0;
        margin-right: 12px;
        font-size: $tab-pills__font-size;
        color: $md-gray-90;
        text-align: left;
        border-bottom: 1px solid $md-gray-30;
        border-radius: 0px;

        &:hover {
          color: $md-gray-90;
          background-color: transparent;
          border-bottom: $tab-tabs--hover__border;
        }
      }
    }

    >.active>a,
    >.active>a:hover,
    >.active>a:focus {
      color: $tab-tabs--active__color;
      border: 0px;
      border-bottom: $tab-tabs--active__border;
    }

    @media (min-width: $screen-sm-min) {
      .#{$prefix}-tab__item>a {
        border-bottom: 1px solid $md-gray-30;
        border-radius: 0px;
      }

      >.active>a,
      >.active>a:hover,
      >.active>a:focus {
        border-bottom: $tab-tabs--active__border;
      }
    }
  }

  .#{$prefix}-tab--subnav {
    padding-top: 28px;

    .#{$prefix}-tab__item:first-of-type {
      padding-left: 0px;
    }
  }

  .#{$prefix}-tab--stacked {
    .#{$prefix}-tab__item {
      float: none;

      &.current {
        color: $md-theme-50;

        >a {
          color: $md-theme-50;
          border-bottom: 1px solid $md-theme-50;
        }
      }

      +.#{$prefix}-tab__item {
        margin-left: 0px;

        .#{$prefix}-tab__item {
          margin-left: 15px;
        }
      }

      >a {
        padding: 8px 15px;
        color: $md-gray-90;
        background: none;

        &:hover {
          background-color: $md-gray-30;
        }
      }
    }
  }

  .#{$prefix}-tab--tabs,
  .#{$prefix}-tab--subnav {
    border-bottom: 0;

    .md-tab__list {
      position: relative;
      top: 1px;
      margin-bottom: 0;
    }

    .#{$prefix}-tab__item>a {
      border-radius: $global-radius;
    }

    @media (min-width: $screen-sm-min) {
      .#{$prefix}-tab__item>a {
        border-radius: $global-radius $global-radius 0 0;
      }

      >.active>a,
      >.active>a:hover,
      >.active>a:focus {
        border-bottom-color: $tab-tabs--justified-active__border-color;
      }
    }
  }

  .#{$prefix}-tab--tabs .dropdown-menu {
    margin-top: -1px;

    @include border-top-radius(0);
  }

  .#{$prefix}-tab--cstabs {
    >.#{$prefix}-tab__list {
      display: flex;

      >.#{$prefix}-tab__item {
        >a {
          display: block;
          height: 59px;
          padding-top: 18px;
          padding-right: 18px;
          padding-left: 18px;
          font-family: $brand-font-light;
          font-size: 18px;
          color: $md-gray-50;
          text-align: center;
          text-decoration: none;
          background-color: $md-white-100;
          border: 1px solid $md-gray-10;
          opacity: 0.7;

          &:hover {
            color: $md-black-100;
            cursor: pointer;
            background-color: $md-white-100;
            opacity: 1;
          }

          &:focus {
            outline: none;
            box-shadow: none;
          }

          >md-tab-heading>div,
          >md-tab-heading>div {
            font-family: $brand-font-extra-light;
            font-size: 30px;
            color: $md-theme-50;
          }
        }

        &:first-of-type {
          >a {
            margin-left: 0px;
          }
        }

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

        &.active {
          >a {
            height: 64px;
            margin-bottom: 0px;
            color: $md-black-100;
            background-color: $md-white-100;
            border: 1px solid $md-gray-10;
            border-bottom: none;
            opacity: 1;

            &:hover {
              background-color: $md-white-100;
              border: 1px solid $md-gray-10;
              border-bottom: none;
            }
          }
        }
      }
    }

    &.#{$prefix}-tab--justified {
      .#{$prefix}-tab__item {
        flex-grow: 1;
      }
    }

    &.#{$prefix}-tab--largetabs {
      .#{$prefix}-tab__item>a {
        height: 87px;
        padding-top: 10px;
        font-size: 14px;
      }

      .#{$prefix}-tab__item.active>a {
        height: 88px;
      }
    }
  }

  .#{$prefix}-tab--graytab {
    &.#{$prefix}-tab--cstabs .#{$prefix}-tab__item>a {
      border: 1px solid $md-gray-10;
      opacity: 0.5;

      &:hover,
      &:focus {
        background-color: $md-gray-10;
      }
    }

    &.#{$prefix}-tab--cstabs .#{$prefix}-tab__item.active>a {
      background-color: $md-gray-10;

      &:hover,
      &:focus {
        background-color: $md-gray-10;
      }
    }

    .#{$prefix}-tab__content {
      background-color: $md-gray-10;
    }
  }

  .#{$prefix}-tab__item {
    flex-grow: 1;

    &.#{$prefix}-type--pills {
      min-width: 200px;
      text-align: center;

      >a {
        padding: $tab-pills__padding;
        font-size: $tab-pills__font-size;
        line-height: 1.5;
        color: $tab-pills__color;
        background: $tab-pills__background;
        border: $tab-pills__border;
        background-clip: padding-box;

        &:hover {
          background: $tab-pills--hover__background;
        }
      }

      &.active {

        >a,
        a:hover,
        a:focus {
          background: $tab-pills--active__background;
        }
      }

      &.disabled {
        pointer-events: none;

        >a,
        &:hover,
        &:focus {
          background: $tab-pills__background;
        }
      }

      &:first-child,
      &.first {
        >a {
          @include border-left-radius(20px);
        }
      }

      &:last-child,
      &.last {
        >a {
          @include border-right-radius(20px);
        }
      }
    }

    &.#{$prefix}-type--tabs {
      float: left;

      >a {
        padding-right: 30px;
        padding-bottom: 9.5px;
        padding-left: 0;
        margin-right: 12px;
        color: $md-gray-90;
        text-align: left;
        cursor: pointer;
        border: 0px;
        border-bottom: 1px solid $md-gray-30;
        border-radius: 0px;

        &:hover {
          padding-bottom: 8px;
          background-color: transparent;
          border-bottom: $tab-tabs--hover__border;
          transition: border-bottom-color 0.5s ease;
        }

        &:focus {
          box-shadow: none;
        }
      }

      &.active>a {

        &,
        &:hover,
        &:focus {
          padding-bottom: 8px;
          color: $tab-tabs--active__color;
          cursor: default;
          background-color: transparent;
          border: 0px;
          border-bottom: $tab-tabs--active__border;
          transition: border-bottom-color 0.5s ease, color 0.5s ease;
        }
      }
    }
  }
}