.accordion {
  background-color: var(--c-background, #fff);
  border: 2px solid var(--c-primary, #2b7fff);
  border-radius: 5px;

  &:not(:first-child) {
    margin-top: 0.5rem;
  }

  .title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    cursor: pointer;
    color: var(--c-primary, #2b7fff);

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "";
      width: 21px;
      height: 21px;
      border: 2px solid var(--c-primary, #2b7fff);
      border-radius: 50%;
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--c-primary, #2b7fff);
    }

    &::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 2px solid var(--c-primary-foreground, #eff6ff);
      border-bottom: 2px solid var(--c-primary-foreground, #eff6ff);
      position: absolute;
      right: calc(1rem + 7px);
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      transition: transform 0.3s;
    }
  }

  &::details-content {
    transition: opacity 0.5s allow-discrete;
    opacity: 0;
  }

  &[open] .title::after {
    transform: translateY(-50%) rotate(225deg);
  }

  &[open]::details-content {
    opacity: 1;
  }

  & .content {
    padding: 0 1rem 0.6rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--c-foreground, #09090b);
  }
}

円形矢印アイコンのメインカラー枠線アコーディオン

同じ「アコーディオン」カテゴリーのUIパーツ

三角形アイコン + 枠線付きのアコーディオン

三角形アイコン + 背景色付きのアコーディオン

三角形アイコン + 下線付きのアコーディオン

Other CSS UI parts

アコーディオン

バルーン

ボックス

パンくずリスト

ボタン

チェックボックス

見出し・文字

アイコン

リスト

ページネーション

引用

続きを読む

検索フォーム

セレクトボックス

スイッチボタン

タブ

テキストボックス

ツールチップ

Stack(縦・横方向)レイアウト

標準レイアウト

ヘッダー