/* チェックボックス全体 */
.checkbox {
  width: fit-content;
  display: grid;
  grid-template-columns: auto 1fr; /* auto はアイコン、1fr はラベル文字列を想定 */
  gap: 10px;
  padding: 8px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  color: #404040;

  /* チェックボックス全体（アイコンを上に表示） */
  &.checkbox--icon-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* auto はアイコン、1fr はラベル文字列を想定 */
    place-items: center;
    text-align: center;
  }

  /* チェックボックス全体（アイコンを下に表示） */
  &.checkbox--icon-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto; /* 1fr はラベル文字列、auto はアイコンを想定 */
    place-items: center;
    text-align: center;
  }

  /* チェックボックス全体（アイコンを右に表示） */
  &.checkbox--icon-right {
    width: auto;
    display: grid;
    grid-template-columns: 1fr auto; /* 1fr はラベル文字列、auto はアイコンを想定 */
    border-bottom: dashed 1px #BDBDBD;
  }
  &.checkbox--icon-right:last-child {
    border-bottom: none;
  }

  /* チェックボックス全体：非活性の見た目 */
  &:has(.checkbox_icon:disabled) {
    opacity: 0.4;
  }
}

/* アイコン */
.checkbox_icon {
  position: relative;
  width: 24px;
  height: 24px;
  appearance: none;
  background: #FFFFFF;
  border: solid 2px #808080;
  border-radius: 4px;
  box-shadow: 0 0 0 0 transparent;
  transition-duration: 0.2s;
  transition-property: background-color, border, box-shadow, color;

  /* 強制カラーモードが有効のときは、既定のシステムカラー値を設定して、トランジションを無効にする */
  @media (forced-colors: active) {
    transition: none;
    border-color: CanvasText;
  }

  /* アイコン：選択済みの見た目 */
  &:checked {
    background: #46a2d7;
    border-color: #46a2d7;

    /* 強制カラーモードが有効のときは、システムカラーを設定 */
    @media (forced-colors: active) {
      background-color: Canvas;
      border-color: CanvasText;
    }
  }

  /* アイコン：活性時のホバー演出 */
  &:hover:enabled {
    /* 強制カラーモードが無効かつ、ホバーが有効のときは、ホバー演出を追加 */
    @media (forced-colors: none) and (any-hover: hover) {
      border-color: #46a2d7;
      box-shadow: 0 0 0 4px rgba(70,162,215,0.4);
    }
  }

  /* チェックマーク */
  &::before {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
    mask-image: url("icon.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #FFFFFF;
    transition: opacity 0.2s;
  }
  /* 強制カラーモードが有効のときは、既定のシステムカラー値を設定して、トランジションを無効にする */
  @media (forced-colors: active) {
    &::before {
      transition: none;
      background-color: CanvasText;
    }
  }

  /* チェックマーク：選択済みの見た目 */
  &:checked::before {
    opacity: 1;
  }
}

.checkbox span {
  font-size: small;
  line-height: 2;
}
@media screen and (min-width: 600px) {
  .checkbox span {
    display: none;
  }
}