.react-tabs {
  border: none;
  padding: 0;
  margin: 0;
  line-height: (19 / $global-size);

  .tabs {
    border: none;
    background-color: $white;
    line-height: 1;
    @include breakpoint(medium up) {
      display: flex;
      justify-content: space-between;
      flex: 1 1 auto;
    }

    .tabs-title {
      display: block;
      flex: 1 1 auto;
      margin-bottom: 12px;

      @include breakpoint(medium up) {
        width: -webkit-fill-available;
        width: -moz-available;
        display: inline-block;
        margin: 0 (4em / $global-size) 0 0;
      }

      &:last-child {
        margin: 0;
      }

      float: none;
      text-align: center;

      a {
        font-size: (16em / $global-size);
        font-weight: 600;
        color: $mint;
        border: 1px solid $mint;
        padding: (16em / $global-size) (5em / $global-size);
        border-radius: 2px;

        &:hover {
          background: $mint;
          color: white;
        }

        &:focus {
          border: 1px solid $mint;
          background: $mint;
          outline: none;
        }
      }
    }

    .tabs-title > a[aria-selected='true'] {
      background-color: $charcoal;
      color: $white;
      border: 1px solid $charcoal;
    }
  }
}