.tabs > menu {
  display: flex;
  gap: 28px;
  overflow: hidden;
  padding: 0 14px 0 24px;
}

.tabs > menu > button {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  padding: 0;
  min-width: 0;
  height: 23px;
  position: relative;
  background: #CCCCCC;
  height: 23px;
  box-shadow: inset 0 1px #000, inset 0 2px #ccc, inset 0 3px #ddd;

  &:focus {
    outline: none;
  }

  &:focus-visible {
    text-shadow: 0 0 2px var(--primary-3);
  }
}

.tabs > menu > button::before {
  display: block;
  content: '';
  background: url(tab.svg);
  background-position: top left;
  background-repeat: no-repeat;
  width: 14px;
  height: 23px;
  margin-left: -14px;
}

.tabs > menu > button::after {
  display: block;
  content: '';
  background: url(tab.svg);
  background-position: top right;
  background-repeat: no-repeat;
  width: 14px;
  height: 23px;
  margin-right: -14px;
}

.tabs > menu > button:not([aria-selected="true"]):active {
  background: #666;
  box-shadow: inset 0 1px #000, inset 0 2px #444, inset 0 3px #555;
}

.tabs > menu > button:not([aria-selected="true"]):active::before,
.tabs > menu > button:not([aria-selected="true"]):active::after {
  background-image: url(tab-active.svg);
}

.tabs > menu > button[aria-selected="true"] {
  color: #000;
  background: #eee;
  box-shadow: inset 0 1px #000, inset 0 2px #ccc, inset 0 3px #fff;
  z-index: 2;
  height: 25px;

  &::before,
  &::after {
    background-image: url(tab-selected.svg);
    height: 25px;
  }
}

.tabs > [role="tabpanel"] {
  position: relative;
  z-index: 1;
  margin-top: -4px;
  background: #eee;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #ccc, inset 2px 2px 0 #fff, inset -1px -1px 0 #999, inset -2px -2px 0 #bbb;
  /*box-shadow: inset 1px 0 0 #ccc, inset 2px 0 0 #fff, inset -1px -1px 0 #999, inset -2px -2px 0 #bbb;*/
}