.tabGroup {
  margin-top: 1rem;

  ul[role="tablist"] {
    margin: 0 0 -1px;
    padding: 0;
    list-style: none;

    > li {
      display: inline-block;
      list-style: none;
    }
  }

  a[role="tab"] {
    display: inline-block;
    padding: 5px 7.5px;
    border: 1px solid #e6ecf1;
    outline: none;
    background: #f5f7f9;
    text-decoration: none;
    color: #9daab6;
    transition: color 0.2s ease-out;

    &[aria-selected="true"] {
      border-bottom-color: #fff;
      background: #fff;
      color: #242a31;
    }

    &:hover,
    &:focus {
      color: #242a31;
    }

    &:first-child {
      border-top-left-radius: 4px;
    }
    &:last-child {
      border-top-right-radius: 4px;
    }
  }

  section[role="tabpanel"] {
    margin: 0;
    padding: 15px;
    border: 1px solid #e6ecf1;
    overflow: hidden;

    > :first-child {
      margin-top: 0;
    }

    > pre:last-child {
      display: block;
      margin-bottom: -16px;
    }
  }

  @media (min-width: 768px) {
    a[role="tab"] {
      padding: 5px 15px;
    }
  }
}

.mainContainer[dir="rtl"] main ul[role="tablist"] {
  margin: 0;
}