// 両方で読み込む

// デフォルト色確認用
// ../../node_modules/bulma/sass/utilities/initial-variables.sass
// ../../node_modules/bulma/sass/utilities/functions.sass

@import "~bulma/sass/utilities/initial-variables";      // なくてもいいけど bulma の初期値を参照したいとき用
@import "~bulma/sass/utilities/functions.sass";         // findColorInvert を使うため

// ブランド色(固定)
$twitter : #55acee;
$github  : #333;
$google  : rgb(221, 75,  57);

// ある程度決まっている色
$piyo    : #f29601;
$gold    : hsl(38, 80%, 60%);

$sbc_b   : hsl(36.23,75.36%,58.63%); // 盤の色(黄色)

$twitter-invert : findColorInvert($twitter);
$github-invert  : findColorInvert($github);
$google-invert  : findColorInvert($google);
$gold-invert    : findColorInvert($gold);
$piyo-invert    : findColorInvert($piyo);
$orange-invert  : findColorInvert($orange);
$sbc_b-invert   : findColorInvert($sbc_b);

// $custom-colors に入れておくと下のクラスが定義される
//   .has-text-twitter
//   a.has-text-twitter (hoverで濃くなる)
//   .has-background-twitter
//
// ../node_modules/bulma/sass/utilities/functions.sass
$custom-colors: (
  "twitter" : ($twitter , $twitter-invert ),
  "github"  : ($github  , $github-invert  ),
  "google"  : ($google  , $google-invert  ),
  "gold"    : ($gold    , $gold-invert    ),
  "piyo"    : ($piyo    , $piyo-invert    ),
  "orange"  : ($orange  , $orange-invert  ),
  "sbc_b"   : ($sbc_b   , $sbc_b-invert   ),
);

// 主用カラー
$primary: $blue;
// $primary: $twitter;

//////////////////////////////////////// ../../node_modules/bulma/sass/components/modal.sass

// オーバーレイのとときの背景色
// だいたい背景の情報を加味することが多いのだけどデフォルトでは暗すぎるため少し明るめにする
$modal-background-background-color: bulmaRgba($black, 0.4);

// tablet以上のときの幅
// デフォルトの 640px に固定されると調整しずらい
// 幅を狭めたいときは明示的に指定する
$modal-content-width: 100%;

// モバイル時の 100vh から引く値
// デフォルトの 160px では表示範囲が大きすぎて iPhone だとフッターがスクロールして出てきたりして下のボタン押せない
// なので 80vh になるように調整する
// $modal-content-spacing-mobile: 20vh;
// ここで指定しても .modal-card の max-height の設定が二箇所になったもう片方に負ける
// 設計が理解不能なのでCSSで調整する

// モーダルカードのタイトルが巨大すぎるので小さくする
$modal-card-title-size: $size-6;

//////////////////////////////////////// ../../node_modules/bulma/sass/components/navbar.sass

// モバイルでナビバーをメニュー化しない
// これをするとモバイルのときバーが小さくならない
// が、メニュー化されることの弊害の方が大きいのでメニュー化を阻止する
$navbar-breakpoint: 0;

//////////////////////////////////////// ../../node_modules/bulma/sass/layout/section.sass

// // PC用になっているので狭くする
// $section-padding: 0rem;

// ../../node_modules/bulma/sass/utilities/initial-variables.sass
//
// 古い
// $family-monospace: Osaka-mono, "Osaka-等幅", "ＭＳ ゴシック", "Courier New", Consolas, monospace;
//
// モダン設定
$family-monospace: "Roboto Mono", "Consolas", "Menlo", "Courier New", "ＭＳ ゴシック", monospace;
