/* リストの装飾 */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.5rem;
  column-gap: 2rem;
  justify-content: center;
  align-items: center;
}

/* タブ */
.tabs__tab {
  user-select: none;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ink);
  line-height: 1.25;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
  transition: all ease 200ms;
  &:hover {
    opacity: 80%;
  }

  &.active {
    background-color: var(--blue);
    color: var(--snow);
  }
}

/* フォーカスリング（キーボード操作の可視化に必須） */
.tabs__tab:focus-visible {
  outline: 2px solid #06f;
  outline-offset: 2px;
}

/* パネル */
.tabs__panel {
  &[hidden] {
    display: none;
  }
}