// ダークモード用カスタムプロパティ
@mixin prefers_dark_root {
  :root {
  --text-main: #faf8f7;
  --bg4: #1c1a1a;
  --bg3:#242529;
  --bg2:#2d343a;
  --bg1:#42505e;
  --bg1-on:#313c46bd;
  --underline-blue: #234794 ;
  --underline:rgba(255, 255, 0, 0.801);
  --underline-red:#ff2f33;
  }
}

// ダークモード用スタイルシート
@mixin prefers_dark_style {
  .marker{
    background: yellow;
    color: #1c1a1a;
  }
  .keyboard-key{
    box-shadow: 1px 2px 2px #6e6e6e;
  }
  /*ダークモード時の吹き出し*/
  .sbs-line.sbp-r .speech-balloon{
    background-color: var(--bg2);
    border-color: #85e249;
    border-width: 2px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-line.sbp-r > .speech-balloon {
    border-width: 2px;
  }
  .sbs-line.sbp-r .speech-balloon::after,
  .sbs-stn.sbp-r .speech-balloon::after{
    border-left-color: var(--bg2);
  }
  .sbs-line.sbp-l .speech-balloon::after,
  .sbs-flat.sbp-l .speech-balloon::after{
    border-right-color: var(--bg2);
  }
  .sbs-flat.sbp-r .speech-balloon::after {
    border-left-color: var(--bg2);
  }
  .sbs-line.sbp-l .speech-balloon,
  .sbs-flat.sbp-l .speech-balloon,
  .sbs-flat.sbp-r .speech-balloon {
    background-color: var(--bg2);
    border-color: var(--text-main);
    border-width: 2px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-line.sbp-l,
  .cocoon-block-balloon.not-nested-style.sbs-flat.sbp-l,
  .cocoon-block-balloon.not-nested-style.sbs-flat.sbp-r{
    --cocoon-custom-border-color: var(--text-main);
  }
  .cocoon-block-balloon.not-nested-style.sbs-line.sbp-l>.speech-balloon,
  .cocoon-block-balloon.not-nested-style.sbs-flat.sbp-l>.speech-balloon,
  .cocoon-block-balloon.not-nested-style.sbs-flat.sbp-r>.speech-balloon{
    border-width: 2px;
  }
  .sns-buttons a{
    background-color: #585858;
  }
  /*リンクの色変更*/
  a{
    color: #99ccff;
  }
  a:hover {
    color: #f7a488;
  }

  .bc-brand-color-white a {
    background-color: #888;
  }
}

// ダークモード用カスタム色
@mixin prefers_dark_skin {
  /* カスタム色対応 */
  .speech-wrap,
  .toggle-box,
  .timeline-box,
  .iconlist-box,
  .faq-wrap,
  .caption-box,
  .tab-caption-box,
  .label-box,
  .micro-balloon,
  .micro-text {
    --cocoon-custom-text-color: var(--text-main);
  }

  .info-list,
  .info-list .info-list-item-content-link,
  .widget_info_list {
    color: var(--text-main);
  }

  .breadcrumb.sbp-main-before,
  .breadcrumb.sbp-footer-before,
  .breadcrumb.pbp-main-before,
  .breadcrumb.pbp-footer-before {
    background-color: transparent;
  }

  .toggle-box {
    --cocoon-custom-background-color: transparent;
  }

  .has-box-style,
  .has-border {
    --cocoon-box-border-color: #ccc;
  }

  .is-style-border-thin-and-thick,
  .is-style-border-radius-s-thin-and-thick,
  .is-style-border-radius-l-thin-and-thick {
    border-color: rgba(255, 255, 255, 0.1);
  }

   .is-style-light-background-box{
     background-color: rgba(255, 255, 255, 0.1);
   }

  .is-style-stripe-box {
    background-image: repeating-linear-gradient(-45deg, #333 0, #333 3px, transparent 3px, transparent 6px);
  }

  .is-style-checkered-box {
    background-image: linear-gradient(90deg, rgba(232, 238, 236, 0.1) 50%, transparent 50%), linear-gradient(rgba(234, 236, 238, 0.1) 50%, transparent 50%);
  }

  .is-style-stitch-box {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.2);
  }

  .is-style-border-top-box {
    box-shadow: 0 3px 5px rgba(255, 255, 255, 0.22);
  }

  .is-style-border-left-box {
    box-shadow: 0px 2px 3px rgba(255, 255, 255, 0.33);
  }

  // 左吹き出し
  [class^="is-style-balloon-"], [class*=" is-style-balloon-"] {
    --cocoon-white-color: var(--bg3);
    background: var(--cocoon-white-color);
    border: 1px solid var(--cocoon-box-border-color);
  }
}