.atabs {
  background: #fff;
  border: 1px solid #999;
  position: relative;
}

.atabs__list:not([aria-orientation="vertical"]) {
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
  display: flex;
  white-space: nowrap;
  overflow: auto;
}

[data-atabs-orientation="vertical"] {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid;
}

.atabs__list[aria-orientation="vertical"] {
  width: 100%
}

.atabs__list[aria-orientation="vertical"] .atabs__list__tab {
  border-right: 0;
  text-align: left;
  width: 100%;
}

@media screen and ( min-width: 30em ) {
  [data-atabs-orientation="vertical"] .atabs__panel {
    width: calc(100% - 12em);
  }

  .atabs__list[aria-orientation="vertical"] {
    width: 12em;
  }
}

.atabs__list[hidden] {
  display: none;
}

/**
 * Just to make sure invalid children of a
 * tablist are not visible/accessible.
 * these should also be removed from the DOM
 */
.atabs__list > :not([role="tab"]) {
  display: none;
}

.atabs__list__tab {
  -webkit-appearance: none; /* btn */
  appearance: none; /* btn */
  background: #fff;
  border: 0; /* btn */
  border-bottom: 1px solid;
  flex-grow: 1;
  font: inherit; /* btn */
  margin: 0; /* btn */
  padding: .825em 1em;
  text-decoration: none; /* if <a> */
}

.atabs__list__tab:not(:last-of-type) {
  border-right: 1px solid;
}

.atabs__list__tab:active,
.atabs__list__tab:hover,
.atabs__list__tab:focus {
  background: #4464c2;
  color: #fff;
  outline: 2px solid #4464c2;
  outline-offset: -2px;
}

.atabs__list__tab > span,
.atabs__list__tab > svg {
  pointer-events: none;
}

.atabs__list__tab[aria-selected="true"] {
  background: #213469;
  border-bottom: 3px solid #213469; /* high contrast vid */
  color: #fff;
}

.atabs__list__tab[aria-selected="true"]:hover,
.atabs__list__tab[aria-selected="true"]:focus {
  box-shadow: inset 0 1px 0 4px #fff;
}

.atabs__panel[hidden] {
  display: none;
}

.atabs__panel {
  border: 1px solid;
  border-top: 0;
  padding: 1.25em;
}

.atabs__panel:focus-visible {
  box-shadow: inset 0 0 1px #222;
  outline: 2px solid;
  outline-offset: -2px;
}

.atabs__panel.focus-visible {
  box-shadow: inset 0 0 1px #0072e4;
  outline: 4px solid #0072e4;
  outline-offset: -3px;
}

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

.atabs__panel > :last-child {
  margin-bottom: 0;
}