$default-border: 1px solid ui-color(u-cool-gray);

.u-tab-header {
  padding: 0;

  .nav-tabs {
    display: flex;
    justify-content: space-between;
    border: $default-border;

    li {
      width: 100%;
      background-color: ui-color(u-lightest-gray);
      &:last-of-type a {
        border-right: none;
      }

      &.active {
        & + li a {
          border-left: $default-border;
        }
        a {
          background-color: ui-color(u-white);
          border: 1px solid ui-color(u-white);
          box-shadow: 0 -5px 0 ui-color(u-blue);
        }
      }
    }

    a {
      margin: 0;
      height: 100%;

      border: none;
      border-radius: 0;
      border: $default-border;
      border-top: none;
      border-left: none;

      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      &:hover {
        background-color: ui-color(u-lighter-gray);
      }
    }
  }

  @media screen and (max-width: $screen-sm-max) {
    .nav-tabs {
      flex-wrap: wrap;
      justify-content: flex-start;

      border-bottom: none;
      background-color: ui-color(u-lightest-gray);
      li {
        width: 33.33%;
        flex-grow: 1;
        &.active a {
          box-shadow: inset 5px 0 0 ui-color(u-blue);
        }
        &.active + li a,
        a {
          border: none;
          //display: flex;
          //justify-content: center;
          //align-items: center;
          //height: 100%;
        }
      }
    }
  }

}
.tab-content {
  background-color: ui-color(u-white);
  border: $default-border;
  border-top: none;

  padding-left: $grid-gutter-width;
  padding-right: $grid-gutter-width;
}