/* リストの装飾 */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  filter: var(--filter-shadow-2);
}

/* タブ */
.tabs__tab {
  user-select: none;
  border-radius: 0.5rem;
  border: 2px solid var(--blue);
  line-height: 1.25;
  font-weight: 900;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  color: var(--blue);

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

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

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