.sg-tabs {
  background: $sg-ubuntu-orange-10;

  ul {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
  }

  li {

    @include media('hover') {
      &:hover a {
        color: $sg-text-grey;
        border-bottom: 3px solid $sg-text-grey;
      }
    }

    &.active a {
      color: $sg-text-grey;
      border-bottom: 3px solid $sg-text-grey;
    }

    & + li {
      margin-left: 1em;

      @include media('>md') {
        margin-left: 2em;
      }
    }
  }

  a {
    display: block;
    padding: 1em 0;
    color: $sg-warm-grey;
    text-decoration: none;
  }
}