@use 'sass:math';

// 目次
// ------------------------------

// 01.   管理画面デフォルトのブログカラー
// 02.   ファイルのパス
// 03.   グリッドシステム
// 04.   Media Queries
// 05.   ボタン
// 06.   ラベル
// 07.   バッジ
// 08.   パネル
// 09.   タイムライン
// 10.   テーブル
// 11.   フォーム
// 12.   アラート
// 13.   プログレスバー
// 14.   アニメーション
// 15.   編集ページ

// ------------------------------
//  acms.cssまたはacms-admin.cssの判定
// ------------------------------
// falseでacms.css、trueでacms-admin.css用のコードと区別しています
$admin: false !default;

// ------------------------------
//  管理画面のフォント設定
// ------------------------------

// 管理画面内、エントリー編集画面、モーダル内で使用されます
$acms-admin-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial,
  'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol' !default;
$acms-code-font-family: 'Menlo', 'Monaco', 'Courier New', monospace !default;

// ------------------------------
//  カラー
// ------------------------------

// この色は管理画面のブログの設定からブログごとに変えることができます。
$acms-red: #dc4040 !default;

// グレースケール
$acms-color-white: #fff;
$acms-color-gray10: #f9f9f9;
$acms-color-gray20: #f1f1f1;
$acms-color-gray30: #efefef;
$acms-color-gray40: #e5e5e5;
$acms-color-gray50: #ddd;
$acms-color-gray60: #ccc;
$acms-color-gray70: #aaa;
$acms-color-gray80: #999;
$acms-color-gray90: #4b4b4b;
$acms-color-black: #333;
$acms-color-black-dark: #000;

// システムグレー
$acms-color-system-gray10: #f2f2f5;
$acms-color-system-gray20: #e2e2e8;
$acms-color-system-gray30: #d2d2db;
$acms-color-system-gray40: #c2c2ce;
$acms-color-system-gray50: #b2b2c0;
$acms-color-system-gray60: #a2a2b3;
$acms-color-system-gray70: #7e7e8b;
$acms-color-system-gray80: #595963;
$acms-color-system-gray90: #35353a;

// Info
$acms-color-info10: #e8effb;
$acms-color-info20: #c5d8f5;
$acms-color-info30: #a3c0ef;
$acms-color-info40: #80a8ea;
$acms-color-info50: #5d90e4;
$acms-color-info60: #3b79de;
$acms-color-info70: #1861d8;
$acms-color-info80: #1452b8;
$acms-color-info90: #114497;

// Success
$acms-color-success10: #e6f5e8;
$acms-color-success20: #c0e4c5;
$acms-color-success30: #9cd4a3;
$acms-color-success40: #78c281;
$acms-color-success50: #54b05f;
$acms-color-success60: #319d3e;
$acms-color-success70: #0f8a1e;
$acms-color-success80: #0d7319;
$acms-color-success90: #0a5b14;

// Warning
$acms-color-warning10: #ffefcc;
$acms-color-warning20: #ffdf99;
$acms-color-warning30: #ffce66;
$acms-color-warning40: #ffbc37;
$acms-color-warning50: #ffa90b;
$acms-color-warning60: #d99009;
$acms-color-warning70: #b37608;
$acms-color-warning80: #8c5d06;
$acms-color-warning90: #664404;

// Danger
$acms-color-danger10: #f9e6e9;
$acms-color-danger20: #efc1c8;
$acms-color-danger30: #e59da8;
$acms-color-danger40: #da7988;
$acms-color-danger50: #ce5769;
$acms-color-danger60: #c1354a;
$acms-color-danger70: #b3142c;
$acms-color-danger80: #951125;
$acms-color-danger90: #760d1d;

// 注意
$acms-color-caution-text: $acms-color-danger60;
$acms-color-caution-bg: $acms-color-danger20;

// リンク
$acms-color-link-text: #006dd9;

// ------------------------------
//  ファイルのパス
// ------------------------------

// a-blog cmsをインストールする階層が直下以外でも成立するパスの書き方をしています。
// その影響のため、オリジナルのテーマ内にacms.cssをいれたときはパスを変更してください。

$acms-path-marker: '../images/marker/' !default;
$acms-form-select: '../images/marker/arrow_black03.png' !default;
$acms-font: '../fonts/' !default;

// ------------------------------
//  グリッドシステム
// ------------------------------

//コンテナー
$acms-container: 980px !default;

// グリッドシステムの合計のカラム数
$acms-columns: 12 !default;

// 各カラムの幅
//$acms-col-1        : math.div(1, $acms-columns) !default;
//$acms-col-2        : math.div(1, $acms-columns) !default;
//$acms-col-3        : percentage(3 / $acms-columns) !default;
//$acms-col-4        : percentage(4 / $acms-columns) !default;
//$acms-col-5        : percentage(5 / $acms-columns) !default;
//$acms-col-6        : percentage(6 / $acms-columns) !default;
//$acms-col-7        : percentage(7 / $acms-columns) !default;
//$acms-col-8        : percentage(8 / $acms-columns) !default;
//$acms-col-9        : percentage(9 / $acms-columns) !default;
//$acms-col-10       : percentage(10 / $acms-columns) !default;
//$acms-col-11       : percentage(11 / $acms-columns) !default;
//$acms-col-12       : percentage(12 / $acms-columns) !default;

// ※合計のカラム数を増やしたら、各カラムの幅も増やしてください。

// 例）13カラムにしたい場合
// $acms-columns: 13 !default;

// $acms-col-1: percentage(1 / $acms-columns) !default;
// ...
// $acms-col-13: percentage(13 / $acms-columns) !default;

//  グリッドシステム　間隔
//===============================

// ** a-blog cmsのグリッドシステムの仕組み
//acms.cssのグリッドシステムでは、各カラムにpadding左右10pxつけ、
//はみ出した左右10pxを、左右をmargin-10px（ネガティブマージンと呼ばれます）
//を設定したコンテナーを全体に適応し、相殺することで成立しています。

$grid-space: 20px !default; //左右10px空ける
// $negative-grid-space:        -10px !default; //左右-10pxする

//モバイルのとき
$mobile-grid: 100% !default; //幅を100%にする
$mobile-grid-space: 0 !default; //10px空いていたのを0にする
// $mobile-negative-grid-space: 0 !default; //-10pxしていたのを0にする

// ------------------------------
//  Media Queries
// ------------------------------

// max-widthの値も用意していますが、基本的にはmin-widthの値を使っています。
// よりコードの記述がシンプルになる場合はmax-widthを使います。

//min-width指定
$breakpoint-sm-min: 480px !default;
$breakpoint-md-min: 768px !default;
$breakpoint-lg-min: 1024px !default;
$breakpoint-xl-min: 1440px !default;

//max-width指定
$breakpoint-sm-max: ($breakpoint-sm-min - 0.02) !default; //479.98px
$breakpoint-md-max: ($breakpoint-md-min - 0.02) !default; //767.98px
$breakpoint-lg-max: ($breakpoint-lg-min - 0.02) !default; //1023.98px
$breakpoint-xl-max: ($breakpoint-xl-min - 0.02) !default; //1439.98px

// ------------------------------
//  エントリー内スタイル
// ------------------------------
//  ユニットグループ
//===============================
$entry-class: acms-entry !default;
$grid-column-name: 'acms-col-' !default;
$text-unit-tags: 'h2', 'h3', 'h4', 'h5', 'h6', 'dl', 'p' !default;
$unit-type: 'image', 'file', 'map', 'yolp', 'street-view', 'youtube', 'video', 'eximage', 'media', 'quote', 'module' !default;
$align: 'left', 'right', 'center', 'auto' !default;
$unit-gutter: $grid-space !default;
$unit-margin-bottom: $unit-gutter !default;
$unit-margin-bottom-no-caption: math.div($unit-gutter, 2) !default;
$hightlight-colors: #ff6, #a0ffff, #9f9, #f99, #f6f, #800 !default;

// ------------------------------
//  ボタン
// ------------------------------
//基本カラー
$acms-btn-background: $acms-color-gray30 !default;
$acms-btn-border-color: rgb(0 0 0 / 20%) !default;
$acms-btn-hover-border-color: rgb(0 0 0 / 40%) !default;
$acms-btn-active-border-color: rgb(0 0 0 / 40%) !default;
$acms-btn-focus-border-color: #137af3 !default;
$acms-btn-focus-box-shadow: 0 0 0 2px rgb(19 122 243 / 40%) !default;
$acms-btn-admin-background: $acms-color-white !default;

// 文字カラー
$acms-btn-text-default-color: $acms-color-black !default;
$acms-btn-text-color: $acms-color-white !default;

// 基準カラー
$acms-btn-primary: $acms-color-info70 !default;
$acms-btn-info: $acms-color-gray90 !default;
$acms-btn-success: $acms-color-success70 !default;
$acms-btn-warning: $acms-color-warning50 !default;
$acms-btn-danger: $acms-color-danger60 !default;
$acms-btn-admin-primary: $acms-color-info70 !default;
$acms-btn-admin-info: $acms-color-gray90 !default;
$acms-btn-admin-danger: $acms-color-danger60 !default;

// デフォルトのボタン
//===============================

$acms-btn-padding-y: 8px !default; //上下padding
$acms-btn-padding-x: 8px !default; //左右padding
$acms-btn-padding-x-sp: 10px !default; //左右padding
$acms-btn-font-size: 14 !default;
$acms-btn-font-size-desktop: 12 !default;

//ボタンサイズ：Small
$acms-btn-small-padding-y: 4px !default; //上下padding
$acms-btn-small-padding-x: 6px !default; //左右padding
$acms-btn-small-font-size: 10 !default;

//ボタンサイズ：Large
$acms-btn-large-padding-y: 8px !default; //上下padding
$acms-btn-large-padding-x: 16px !default; //左右padding
$acms-btn-large-border-radius: 4px !default;
$acms-btn-large-font-size: 16 !default;

//ボタンサイズ：アイコン
$acms-btn-icon-padding: 2px 5px !default; //上下左右padding
$acms-btn-icon-font-size: 18 !default;

// ** primary
// デフォルト
$acms-btn-primary-color-base: $acms-btn-primary !default;
$acms-btn-primary-color-darker: darken($acms-btn-primary, 8%) !default;
$acms-btn-primary-start-color: lighten($acms-btn-primary, 8%) !default; //グラデーションの始まり
$acms-btn-primary-end-color: $acms-btn-primary !default; //グラデーションの終わり
$acms-btn-primary-border: $acms-btn-primary !default;

// hover
$acms-btn-primary-hover-border: darken($acms-btn-primary, 17%) !default;

// active
$acms-btn-primary-active-bg: $acms-btn-primary !default;
$acms-btn-primary-active-border: darken($acms-btn-primary, 17%) !default;

// focus
$acms-btn-primary-focus-border-color: darken($acms-btn-primary, 17%) !default;

// ** info
// デフォルト
$acms-btn-info-color-base: $acms-btn-info !default;
$acms-btn-info-color-darker: darken($acms-btn-info, 8%) !default;
$acms-btn-info-start-color: lighten($acms-btn-info, 8%) !default;
$acms-btn-info-end-color: $acms-btn-info !default;
$acms-btn-info-border: $acms-btn-info !default;

// hover
$acms-btn-info-hover-start-color: lighten($acms-btn-info, 12%) !default;
$acms-btn-info-hover-end-color: lighten($acms-btn-info, 2%) !default;
$acms-btn-info-hover-border: darken($acms-btn-info, 17%) !default;

// active
$acms-btn-info-active-bg: $acms-btn-info !default;
$acms-btn-info-active-border: darken($acms-btn-info, 17%) !default;
$acms-btn-info-active-inset: darken($acms-btn-info, 17%) !default;

// focus
$acms-btn-info-focus-border-color: darken($acms-btn-info, 17%) !default;

// ** success
// デフォルト
$acms-btn-success-color-base: $acms-btn-success !default;
$acms-btn-success-color-darker: darken($acms-btn-success, 5%) !default;
$acms-btn-success-start-color: lighten($acms-btn-success, 8%) !default;
$acms-btn-success-end-color: $acms-btn-success !default;
$acms-btn-success-border: $acms-btn-success !default;

// hover
$acms-btn-success-hover-start-color: lighten($acms-btn-success, 12%) !default;
$acms-btn-success-hover-end-color: lighten($acms-btn-success, 2%) !default;
$acms-btn-success-hover-border: darken($acms-btn-success, 17%) !default;

// active
$acms-btn-success-active-bg: $acms-btn-success !default;
$acms-btn-success-active-border: darken($acms-btn-success, 17%) !default;
$acms-btn-success-active-inset: darken($acms-btn-success, 17%) !default;

// focus
$acms-btn-success-focus-border-color: darken($acms-btn-success, 17%) !default;

// ** warning
// デフォルト
$acms-btn-warning-color-base: $acms-btn-warning !default;
$acms-btn-warning-color-darker: darken($acms-btn-warning, 8%) !default;
$acms-btn-warning-start-color: lighten($acms-btn-warning, 8%) !default;
$acms-btn-warning-end-color: $acms-btn-warning !default;
$acms-btn-warning-border: $acms-btn-warning !default;

// hover
$acms-btn-warning-hover-start-color: lighten($acms-btn-warning, 12%) !default;
$acms-btn-warning-hover-end-color: lighten($acms-btn-warning, 2%) !default;
$acms-btn-warning-hover-border: darken($acms-btn-warning, 17%) !default;

// active
$acms-btn-warning-active-bg: $acms-btn-warning !default;
$acms-btn-warning-active-border: darken($acms-btn-warning, 17%) !default;
$acms-btn-warning-active-inset: darken($acms-btn-warning, 17%) !default;

// focus
$acms-btn-warning-focus-border-color: darken($acms-btn-warning, 17%) !default;

// ** danger
// デフォルト
$acms-btn-danger-color-base: $acms-btn-danger !default;
$acms-btn-danger-color-darker: darken($acms-btn-danger, 5%) !default;
$acms-btn-danger-start-color: lighten($acms-btn-danger, 8%) !default;
$acms-btn-danger-end-color: $acms-btn-danger !default;
$acms-btn-danger-border: $acms-btn-danger !default;

// hover
$acms-btn-danger-hover-start-color: lighten($acms-btn-danger, 12%) !default;
$acms-btn-danger-hover-end-color: lighten($acms-btn-danger, 2%) !default;
$acms-btn-danger-hover-border: darken($acms-btn-danger, 17%) !default;

// active
$acms-btn-danger-active-bg: $acms-btn-danger !default;
$acms-btn-danger-active-border: darken($acms-btn-danger, 17%) !default;
$acms-btn-danger-active-inset: darken($acms-btn-danger, 17%) !default;

// focus
$acms-btn-danger-focus-border-color: darken($acms-btn-danger, 17%) !default;

// フラットボタン
//===============================

$acms-btn-flat-padding-y: 14px !default; //上下左右padding
$acms-btn-flat-padding-x: 8px !default; //左右padding
$acms-btn-flat-padding-x-sp: 20px !default; //左右padding
$acms-btn-flat-border-radius: 4px !default;
$acms-btn-flat-font-size: 16 !default;
$acms-btn-flat-font-size-desktop: 13 !default;
$acms-btn-flat-text-default-color: #666 !default; //デフォルトのボタンの文字カラー
$acms-btn-flat-text-color: $acms-color-white !default; //カラーボタンのボタンの文字カラー

// ** primary
// デフォルト
$acms-btn-flat-primary-color: lighten($acms-btn-primary, 8%) !default; // 背景色
$acms-btn-flat-primary-border: 1px solid $acms-btn-primary !default; // 周りの線の色
// hover
$acms-btn-flat-primary-hover-color: lighten($acms-btn-primary, 12%) !default;
$acms-btn-flat-primary-hover-border: 1px solid darken($acms-btn-primary, 17%) !default;

// active
$acms-btn-flat-primary-active-bg: $acms-btn-primary !default;

// ** info
// デフォルト
$acms-btn-flat-info-color: lighten($acms-btn-info, 8%) !default;
$acms-btn-flat-info-border: 1px solid $acms-btn-info !default;

// hover
$acms-btn-flat-info-hover-color: lighten($acms-btn-info, 12%) !default;
$acms-btn-flat-info-hover-border: 1px solid darken($acms-btn-info, 17%) !default;

// active
$acms-btn-flat-info-active-bg: $acms-btn-info !default;

// ** success
// デフォルト
$acms-btn-flat-success-color: lighten($acms-btn-success, 8%) !default;
$acms-btn-flat-success-border: 1px solid $acms-btn-success !default;

// hover
$acms-btn-flat-success-hover-color: lighten($acms-btn-success, 12%) !default;
$acms-btn-flat-success-hover-border: 1px solid darken($acms-btn-success, 17%) !default;

// active
$acms-btn-flat-success-active-bg: $acms-btn-success !default;

// ** warning
// デフォルト
$acms-btn-flat-warning-color: lighten($acms-btn-warning, 8%) !default;
$acms-btn-flat-warning-border: 1px solid $acms-btn-warning !default;

// hover
$acms-btn-flat-warning-hover-color: lighten($acms-btn-warning, 12%) !default;
$acms-btn-flat-warning-hover-border: 1px solid darken($acms-btn-warning, 17%) !default;

// active
$acms-btn-flat-warning-active-bg: $acms-btn-warning !default;

// ** danger
// デフォルト
$acms-btn-flat-danger-color: lighten($acms-btn-danger, 8%) !default;
$acms-btn-flat-danger-border: 1px solid $acms-btn-danger !default;

// hover
$acms-btn-flat-danger-hover-color: lighten($acms-btn-danger, 12%) !default;
$acms-btn-flat-danger-hover-border: 1px solid darken($acms-btn-danger, 17%) !default;

// active
$acms-btn-flat-danger-active-bg: $acms-btn-danger !default;

// リンクボタン
//===============================
$acms-btn-link-color: #428bca !default;
$acms-btn-link-color-hover: #2e67a5 !default;

// disabledボタン
//===============================
$acms-btn-disabled-opacity: 0.65 !default;
$acms-btn-disabled-opacity-ie: ($acms-btn-disabled-opacity * 100) !default; //IE用opacity

// ------------------------------
// ラベル
// ------------------------------

// デフォルト
$acms-label-text-color: $acms-color-black !default;

// success
$acms-label-text-success-color: $acms-color-success90 !default;

// info
$acms-label-text-info-color: $acms-color-info90 !default;

// warning
$acms-label-text-warning-color: $acms-color-warning90 !default;

// danger
$acms-label-text-danger-color: $acms-color-danger90 !default;

// 背景カラー
//===============================
// ** 基準カラー
$acms-label-black: $acms-color-black !default;

// デフォルト
$acms-label-default: $acms-color-gray60 !default;

// success
$acms-label-success-color: $acms-color-success20 !default;

// info
$acms-label-info-color: $acms-color-info20 !default;

// warning
$acms-label-warning-color: $acms-color-warning20 !default;

// danger
$acms-label-danger-color: $acms-color-danger20 !default;

// ------------------------------
// バッジ
// ------------------------------

// デフォルト
$acms-badge-text-color: $acms-color-black !default;

// info
$acms-badge-text-info-color: $acms-color-info90 !default;

// success
$acms-badge-text-success-color: $acms-color-success90 !default;

// warning
$acms-badge-text-warning-color: $acms-color-warning90 !default;

// danger
$acms-badge-text-danger-color: $acms-color-danger90 !default;

// 背景カラー
//===============================

// デフォルト
$acms-badge-default: $acms-color-gray60 !default;

// success
$acms-badge-success-color: $acms-color-success20 !default;

// info
$acms-badge-info-color: $acms-color-info20 !default;

// warning
$acms-badge-warning-color: $acms-color-warning20 !default;

// danger
$acms-badge-danger-color: $acms-color-danger20 !default;

// 承認バッジの設定
$acms-badge-approval-text-color: $acms-color-white !default;
$acms-badge-approval-color: $acms-color-danger60 !default;

// ------------------------------
// トースト
// ------------------------------

// デフォルト
$acms-toast-text-color: $acms-color-white !default;

// success
$acms-toast-text-success-color: $acms-color-success90 !default;

// info
$acms-toast-text-info-color: $acms-color-info90 !default;

// warning
$acms-toast-text-warning-color: $acms-color-warning90 !default;

// danger
$acms-toast-text-danger-color: $acms-color-danger90 !default;

// 背景カラー
//===============================
// ** 基準カラー
$acms-toast-black: $acms-color-black !default;

// デフォルト
$acms-toast-default: $acms-color-black !default;

// success
$acms-toast-success-color: $acms-color-success20 !default;

// info
$acms-toast-info-color: $acms-color-info20 !default;

// warning
$acms-toast-warning-color: $acms-color-warning20 !default;

// danger
$acms-toast-danger-color: $acms-color-danger20 !default;

// ------------------------------
// パネル
// ------------------------------

// ** デフォルト
$acms-panel-black-text-color: $acms-color-black !default;

// ボーダー
$acms-panel-black-border: $acms-color-gray50 !default;

// 背景色
$acms-panel-black-bg: $acms-color-gray20 !default;

// ** カラー
// ** info
$acms-panel-info-text-color: $acms-color-info90 !default;
$acms-panel-info-bg: $acms-color-info10 !default;
$acms-panel-info-border: $acms-color-info20 !default;

// ** danger
$acms-panel-danger-text-color: $acms-color-danger90 !default;
$acms-panel-danger-bg: $acms-color-danger10 !default;
$acms-panel-danger-border: $acms-color-danger20 !default;

// ------------------------------
// リスト
// ------------------------------
$acms-list-group-border-color: $acms-color-gray40 !default;

// ------------------------------
// タイムライン
// ------------------------------
$timeline-line-color: $acms-color-gray50 !default;
$timeline-line-width: 4px !default;
$timeline-label-font-size: 14 !default; //日付ラベルのフォントサイズ

$timeline-itemgroup-margin-top: 30px !default;
$timeline-panel-margin: 5px 0 20px !default; //要素間の感覚
$timeline-panel-padding: 10px !default; //内側の感覚
$timeline-panel-border: 1px solid $acms-color-gray50 !default;

// ------------------------------
// アイコン背景
// ------------------------------

// 文字カラー
$acms-icon-text-color: $acms-color-white !default;

// 背景カラー
//===============================
// ** 基準カラー
$acms-icon-black: $acms-color-black !default;

// デフォルト
$acms-icon-default: $acms-color-gray80 !default;

// 基準カラー・success
$acms-icon-color: $acms-color-success70 !default;

// info
$acms-icon-info-color: $acms-color-info70 !default;

// warning
$acms-icon-warning-color: $acms-color-warning70 !default;

// danger
$acms-icon-danger-color: $acms-color-danger70 !default;

// ------------------------------
// テーブル
// ------------------------------

// デフォルト
//===============================
// .acms-table
$acms-table-border: 1px solid $acms-color-gray50 !default;
$acms-table-cell-padding: 10px !default;

// ** 見出しありテーブル
// .acms-table-heading
$acms-table-heading-border: 1px solid $acms-color-gray60 !default;

// .acms-table-heading th
$acms-table-heading-th-bg: $acms-color-gray30 !default;
$acms-table-heading-th-text-color: $acms-color-gray90 !default;

// ** ボーダーテーブル
//.acms-table-bordered
$acms-table-bordered-border: 1px solid $acms-color-gray50 !default;

// ** ストライプテーブル
// .acms-table-striped
$acms-table-border-odd: $acms-color-white !default;
$acms-table-border-even: $acms-color-gray10 !default;

// ** ホバーしたときのテーブル
// .acms-table-hover,.acms-table-hover-line
$acms-table-hover-bg: $acms-color-info10 !default;
$acms-table-hover-line-bg: $acms-color-info10 !default;

// ** 入れ替え用テーブル
// .acms-table-sortable-active
$acms-table-sortable-bg: $acms-color-white !default;

// 管理画面のテーブル
//===============================
// ** デフォルト
// .acms-table-admin
$acms-table-admin-border: 1px solid $acms-color-gray50 !default;
$acms-table-admin-cell: 8px 5px !default; //th,tdのpaddingの感覚
$acms-table-admin-td-bg: $acms-color-white !default;

// ** ストライプテーブル
// .acms-table-admin-striped
$acms-table-admin-border-odd: $acms-color-white !default;
$acms-table-admin-border-even: $acms-color-system-gray10 !default;

// ** ミニテーブル
// .acms-admin-mini-table
$acms-admin-mini-table-thead-border: 0 !default;
$acms-admin-mini-table-border: $acms-table-admin-border !default;

// ** 編集画面用テーブル
// .acms-table-admin-edit
$acms-table-admin-edit-border: $acms-table-admin-border !default;
$acms-table-admin-edit-bg: $acms-color-white !default;
$acms-table-admin-edit-th-width: 250px !default;

// ** 編集画面用 ボーダーありテーブル
// .acms-table-admin-edit-bordered
$acms-table-admin-edit-bordered-border: $acms-table-admin-border !default;
$acms-table-admin-edit-bordered-bg: $acms-color-white !default;
$acms-table-admin-edit-bordered-th-width: $acms-table-admin-edit-th-width !default;

// カラー
//===============================
// info
$acms-table-info-bg: $acms-color-info10 !default;

// success
$acms-table-success-bg: $acms-color-success10 !default;

// warning
$acms-table-warning-bg: $acms-color-warning10 !default;

// danger
$acms-table-danger-bg: $acms-color-danger10 !default;

// ------------------------------
// フォーム
// ------------------------------
// デフォルト
$acms-form-border: 1px solid rgb(0 0 0 / 20%) !default;
$acms-form-border-radius: 3px !default;
$acms-form-box-shadow: 0 1px 1px rgb(0 0 0 / 10%) inset !default;
$acms-form-hover-border-color: rgb(0 0 0 / 30%) !default;
$acms-form-active-border-color: rgb(0 0 0 / 30%) !default;
$acms-form-focus-border-color: #137af3 !default;
$acms-form-focus-box-shadow: 0 0 0 2px rgb(19 122 243 / 40%) !default;
$acms-form-height-small: 22px !default;
$acms-form-height: 26px !default;
$acms-form-height-large: 38px !default;
$acms-form-height-small-sp: 26px !default;
$acms-form-height-sp: 32px !default;
$acms-form-height-large-sp: 44px !default;
$acms-form-padding-x: 4px !default;
$acms-form-padding-x-sp: 8px !default;

// select
$acms-form-select-border: 1px solid rgb(0 0 0 / 20%) !default;
$acms-form-select-padding: 6px 30px 6px 10px !default;
$acms-form-select-font-size: 16 !default;
$acms-form-select-font-size-desktop: 12 !default;
$acms-form-select-border-hover: 1px solid $acms-form-hover-border-color !default;
$acms-form-select-bg-color: $acms-color-gray10 !default;

// multiple
$acms-form-multiple-bg-color: $acms-color-white !default;

// disabled
$acms-form-disabled-border-color: $acms-color-gray50 !default;
$acms-form-disabled-bg-color: $acms-color-gray20 !default;
$acms-form-disabled-text-color: $acms-color-gray80 !default;
$acms-form-disabled-opacity: 0.6 !default;

// 各種 幅
$acms-form-width-large-width: 540px !default;
$acms-form-width-medium-width: 380px !default;
$acms-form-width-small-width: 220px !default;
$acms-form-width-mini-width: 140px !default;

// エラーテキスト
$acms-form-error-border-color: $acms-color-danger50 !default;
$acms-form-error-bg-color: $acms-color-danger10 !default;
$acms-form-error-text-color: $acms-color-danger70 !default;
$acms-text-error-color: $acms-color-danger70 !default;
$acms-text-helper-color: $acms-color-gray90 !default;
$acms-input-images-path: '#{$acms-path-marker}ico_input.png' !default;

// ------------------------------
// アラート
// ------------------------------

// 上下左右の余白
$acms-alert-padding: 20px !default;

// 上下左右の角丸
$acms-alert-border-radius: 0 !default;

// アイコンつきアラートの余白
$acms-alert-icon-padding: 20px 40px 20px 50px !default;

// 各アラートのカラー
// ===============================

// ** デフォルト
// ボーダー
$acms-alert-black-border: $acms-color-system-gray70 !default;

// 背景色
$acms-alert-black-bg: $acms-color-white !default;

// 文字カラー
$acms-alert-black-text-color: $acms-color-system-gray90 !default;

// 閉じるボタン
$acms-alert-black-close-color: $acms-color-system-gray70 !default;

// アイコンカラー
$acms-alert-black-icon-color: $acms-color-system-gray70 !default;

// ** カラー

// ** success
// ボーダー
$acms-alert-success-border: $acms-color-success70 !default;

// 背景色
$acms-alert-success-bg: $acms-color-white !default;

// 文字カラー
$acms-alert-success-text-color: $acms-color-gray90 !default;

// 閉じるボタン
$acms-alert-success-close-color: $acms-color-success70 !default;

// アイコンカラー
$acms-alert-success-icon-color: $acms-color-success70 !default;

// ** info
// ボーダー
$acms-alert-info-border: $acms-color-info70 !default;

// 背景色
$acms-alert-info-bg: $acms-color-white !default;

// 文字カラー
$acms-alert-info-text-color: $acms-color-gray90 !default;

// 閉じるボタン
$acms-alert-info-close-color: $acms-color-info70 !default;

// アイコンカラー
$acms-alert-info-icon-color: $acms-color-info70 !default;

// ** danger
// ボーダー
$acms-alert-danger-border: $acms-color-danger50 !default;

// 背景色
$acms-alert-danger-bg: $acms-color-white !default;

// 文字カラー
$acms-alert-danger-text-color: $acms-color-gray90 !default;

// 閉じるボタン
$acms-alert-danger-close-color: $acms-color-danger60 !default;

// アイコンカラー
$acms-alert-danger-icon-color: $acms-color-danger60 !default;

// ** warning
// ボーダー
$acms-alert-warning-border: $acms-color-warning50 !default;

// 背景色
$acms-alert-warning-bg: $acms-color-white !default;

// 文字カラー
$acms-alert-warning-text-color: $acms-color-gray90 !default;

// 閉じるボタン
$acms-alert-warning-close-color: $acms-color-warning70 !default;

// アイコンカラー
$acms-alert-warning-icon-color: $acms-color-warning60 !default;

// ------------------------------
// プログレスバー
// ------------------------------

// ** プログレスバー全体

// 背景色
$acms-progress-bg: $acms-color-white !default;

// 高さ
$acms-progress-height: 28px !default;

// ボーダー
$acms-progress-border: 1px solid $acms-color-gray60 !default;

// 上下左右の角丸
$acms-progress-border-radius: 4px !default;

// プログレスバー
// ===============================
// 文字の色
$acms-progress-bar-text: $acms-color-black !default;

// ストライプの幅
$acms-progress-bar-stripe-width: 40px !default;

// ** プログレスバーのカラー
// デフォルト
$acms-progress-bar-color: $acms-color-success30 !default;

// info
$acms-progress-bar-color-info: $acms-color-info30 !default;

// danger
$acms-progress-bar-color-danger: $acms-color-danger30 !default;

// ------------------------------
// Lazy Load
// ------------------------------
$acms-lazy-load-bg: $acms-color-gray10 !default;

// ------------------------------
// アニメーション
// ------------------------------

// フェード
// ===============================
// フェードの速度
$acms-fade-speed: 500ms !default;

// フェードイン 透明度（最大で1、0で完全透過）
$acms-fade-in-strong: 0.3 !default;
$acms-fade-in: 0.5 !default;
$acms-fade-in-light: 0.7 !default;

// フェードアウト　透明度（最大で1、0で完全透過）
$acms-fade-out-strong: 0.3 !default;
$acms-fade-out: 0.5 !default;
$acms-fade-out-light: 0.7 !default;

// スライド
// ===============================
// y軸の値
$acms-slide-top: -20px !default; //-を指定することで上方向に移動します
$acms-slide-bottom: 20px !default;

// x軸の値
$acms-slide-left: -20px !default; //-を指定することで左方向に移動します
$acms-slide-right: 20px !default;

// スライドでは、opacityの処理をtransformより早く実行することでフェードのアニメーションを作っています。
$acms-slide-opacity-speed: 500ms !default; //表示する速度
$acms-slide-transform-speed: 1200ms !default; //移動する速度

// ズーム
// ===============================
// 拡大する値
$acms-slide-zoom-in-show: 0.8 !default; // 表示しながら拡大するときのデフォルト
$acms-slide-zoom-in-default: 1 !default;
$acms-slide-zoom-in-hover: 1.2 !default; // hover時の最大
// 縮小する値
$acms-slide-zoom-out-show: 1.2 !default; // 表示しながら縮小するときのデフォルト
$acms-slide-zoom-out-default: 1 !default;
$acms-slide-zoom-out-hover: 0.8 !default; // hover時の最大

$acms-zoom-opacity-speed: 500ms !default; //表示する速度
$acms-zoom-transform-speed: 500ms !default; //移動する速度

// ポップアップ
// ===============================
//y軸の値
$acms-popup-top: -5px !default; //-を指定することで上方向に移動します
$acms-popup-bottom: 5px !default;

//x軸の値
$acms-popup-left: -5px !default; //-を指定することで左方向に移動します
$acms-popup-right: 5px !default;

// hoverしたときとhoverしたあとの速度を変えています
$acms-popup-up-speed: 300ms !default; // hoverしたとき
$acms-popup-down-speed: 500ms !default; // hoverをやめたとき

// 遅延
// ===============================

// 遅延のスピード
$acms-animation-delay-first: 0.1s !default;
$acms-animation-delay-second: 0.25s !default;
$acms-animation-delay-third: 0.3s !default;
$acms-animation-delay-fourth: 0.45s !default;

// 遅延のスピード （反対）
$acms-animation-delay-reverse-fourth: 0.1s !default;
$acms-animation-delay-reverse-third: 0.25s !default;
$acms-animation-delay-reverse-second: 0.3s !default;
$acms-animation-delay-reverse-first: 0.45s !default;

// ------------------------------
//  編集ページ
// ------------------------------

$acms-admin-title-textcolor: $acms-color-gray90 !default;
$acms-admin-title2-textcolor: $acms-color-gray90 !default;
