@use 'sass:color';
@use 'sass:math';
@use 'sass:map';
@use 'sass:list';

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

// 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-h1-font-size: 30px !default;
$acms-h2-font-size: 24px !default;
$acms-h3-font-size: 18px !default;
$acms-h4-font-size: 16px !default;
$acms-h5-font-size: 14px !default;
$acms-h6-font-size: 12px !default;
$acms-font-sizes: (
  1: $acms-h1-font-size,
  2: $acms-h2-font-size,
  3: $acms-h3-font-size,
  4: $acms-h4-font-size,
  5: $acms-h5-font-size,
  6: $acms-h6-font-size,
) !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;
$acms-color-link-text-hover: #8ebef7;
$acms-color-link-text-active: #8ebef7;

// 検索時のハイライト
$hightlight-colors: #ff6, #a0ffff, #9f9, #f99, #f6f, #800 !default;

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

// 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;

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

$grid-space: 1.25rem !default;

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

//min-width指定
$breakpoint-sm-min: 480px !default;
$breakpoint-md-min: 768px !default;
$breakpoint-lg-min: 1024px !default;
$breakpoint-xl-min: 1440px !default;
$grid-breakpoints: (
  xs: 0,
  sm: $breakpoint-sm-min,
  md: $breakpoint-md-min,
  lg: $breakpoint-lg-min,
  xl: $breakpoint-xl-min,
) !default;

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;

  @each $key, $num in $map {
    @if not $prev-num or math.unit($num) == '%' or math.unit($prev-num) == '%' {
      // Do nothing
    } @else if not math.compatible($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }

    $prev-key: $key;
    $prev-num: $num;
  }
}

// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
  @if list.length($map) > 0 {
    $values: map.values($map);
    $first-value: list.nth($values, 1);

    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');

// ------------------------------
//  エントリー内スタイル
// ------------------------------
/// この値を変更するときは、js/config.js のblockEditorConfig.editorProps.editorProps.attributes.classも変更すること
$entry-class: acms-entry !default;
$unit-types: 'image', 'file', 'map', 'street-view', 'youtube', 'video', 'eximage', 'media', 'embed', 'module' !default;
$alignments: 'left', 'right', 'center' !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-default-color: $acms-color-black !default;
$acms-btn-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-font-size: 12 !default;
$acms-btn-column-gap: 0.5rem !default;
$acms-btn-line-height: 1 !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: color.adjust($acms-btn-primary, $lightness: -8%) !default;
$acms-btn-primary-start-color: color.adjust($acms-btn-primary, $lightness: 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: color.adjust($acms-btn-primary, $lightness: -17%) !default;

// active
$acms-btn-primary-active-bg: $acms-btn-primary !default;
$acms-btn-primary-active-border: color.adjust($acms-btn-primary, $lightness: -17%) !default;

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

// ** info
// デフォルト
$acms-btn-info-color-base: $acms-btn-info !default;
$acms-btn-info-color-darker: color.adjust($acms-btn-info, $lightness: -8%) !default;
$acms-btn-info-start-color: color.adjust($acms-btn-info, $lightness: 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: color.adjust($acms-btn-info, $lightness: 12%) !default;
$acms-btn-info-hover-end-color: color.adjust($acms-btn-info, $lightness: 2%) !default;
$acms-btn-info-hover-border: color.adjust($acms-btn-info, $lightness: -17%) !default;

// active
$acms-btn-info-active-bg: $acms-btn-info !default;
$acms-btn-info-active-border: color.adjust($acms-btn-info, $lightness: -17%) !default;
$acms-btn-info-active-inset: color.adjust($acms-btn-info, $lightness: -17%) !default;

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

// ** success
// デフォルト
$acms-btn-success-color-base: $acms-btn-success !default;
$acms-btn-success-color-darker: color.adjust($acms-btn-success, $lightness: -5%) !default;
$acms-btn-success-start-color: color.adjust($acms-btn-success, $lightness: 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: color.adjust($acms-btn-success, $lightness: 12%) !default;
$acms-btn-success-hover-end-color: color.adjust($acms-btn-success, $lightness: 2%) !default;
$acms-btn-success-hover-border: color.adjust($acms-btn-success, $lightness: -17%) !default;

// active
$acms-btn-success-active-bg: $acms-btn-success !default;
$acms-btn-success-active-border: color.adjust($acms-btn-success, $lightness: -17%) !default;
$acms-btn-success-active-inset: color.adjust($acms-btn-success, $lightness: -17%) !default;

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

// ** warning
// デフォルト
$acms-btn-warning-color-base: $acms-btn-warning !default;
$acms-btn-warning-color-darker: color.adjust($acms-btn-warning, $lightness: -8%) !default;
$acms-btn-warning-start-color: color.adjust($acms-btn-warning, $lightness: 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: color.adjust($acms-btn-warning, $lightness: 12%) !default;
$acms-btn-warning-hover-end-color: color.adjust($acms-btn-warning, $lightness: 2%) !default;
$acms-btn-warning-hover-border: color.adjust($acms-btn-warning, $lightness: -17%) !default;

// active
$acms-btn-warning-active-bg: $acms-btn-warning !default;
$acms-btn-warning-active-border: color.adjust($acms-btn-warning, $lightness: -17%) !default;
$acms-btn-warning-active-inset: color.adjust($acms-btn-warning, $lightness: -17%) !default;

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

// ** danger
// デフォルト
$acms-btn-danger-color-base: $acms-btn-danger !default;
$acms-btn-danger-color-darker: color.adjust($acms-btn-danger, $lightness: -5%) !default;
$acms-btn-danger-start-color: color.adjust($acms-btn-danger, $lightness: 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: color.adjust($acms-btn-danger, $lightness: 12%) !default;
$acms-btn-danger-hover-end-color: color.adjust($acms-btn-danger, $lightness: 2%) !default;
$acms-btn-danger-hover-border: color.adjust($acms-btn-danger, $lightness: -17%) !default;

// active
$acms-btn-danger-active-bg: $acms-btn-danger !default;
$acms-btn-danger-active-border: color.adjust($acms-btn-danger, $lightness: -17%) !default;
$acms-btn-danger-active-inset: color.adjust($acms-btn-danger, $lightness: -17%) !default;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// hover
$acms-btn-flat-danger-hover-color: color.adjust($acms-btn-danger, $lightness: 12%) !default;
$acms-btn-flat-danger-hover-border: 1px solid color.adjust($acms-btn-danger, $lightness: -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;

// テキストボタン
//===============================
$acms-btn-text-color: $acms-color-black !default;
$acms-btn-text-bg-color-hover: $acms-color-gray20 !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-license-toast-text-color: $acms-color-white !default;

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

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

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

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

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

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

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

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

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

// danger
$acms-license-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-color: $acms-color-gray50 !default;
$acms-table-border-width: 1px !default;
$acms-table-border-style: solid !default;
$acms-table-border: $acms-table-border-width $acms-table-border-style $acms-table-border-color !default;
$acms-table-cell-padding: 10px !default;

// ** 見出しありテーブル
// .acms-table-heading
$acms-table-heading-border-color: $acms-color-gray60 !default;
$acms-table-heading-border-width: 1px !default;
$acms-table-heading-border-style: solid !default;
$acms-table-heading-border: $acms-table-heading-border-width $acms-table-heading-border-style
  $acms-table-heading-border-color !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-color: $acms-color-gray50 !default;
$acms-table-bordered-border-width: 1px !default;
$acms-table-bordered-border-style: solid !default;
$acms-table-bordered-border: $acms-table-bordered-border-width $acms-table-bordered-border-style
  $acms-table-bordered-border-color !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-color: $acms-color-gray50 !default;
$acms-table-admin-border-width: 1px !default;
$acms-table-admin-border-style: solid !default;
$acms-table-admin-border: $acms-table-admin-border-width $acms-table-admin-border-style $acms-table-admin-border-color !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: transparent !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: transparent !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-width: 1px !default;
$acms-form-border: $acms-form-border-width solid rgb(0 0 0 / 20%) !default;
$acms-form-border-radius: 3px !default;
$acms-form-box-shadow: 0 1px 1px 0 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-padding-x: 4px !default;
$acms-form-padding-y: 4px !default;
$acms-form-font-size-sm: 12 !default;
$acms-form-font-size-md: 14 !default;
$acms-form-font-size-lg: 16 !default;
$acms-form-line-height: 1 !default;

// select
$acms-form-select-border-width: 1px !default;
$acms-form-select-border: $acms-form-select-border-width solid rgb(0 0 0 / 20%) !default;
$acms-form-select-border-radius: 3px !default;
$acms-form-select-padding-right: 30px !default;
$acms-form-select-padding: 5px $acms-form-select-padding-right 4px 8px !default;
$acms-form-select-font-size: 12 !default;
$acms-form-select-border-hover: 1px solid $acms-form-hover-border-color !default;
$acms-form-select-bg-color: $acms-color-white !default;
$acms-form-select-hover-bg-color: $acms-color-gray20 !default;
$acms-form-select-text-color: $acms-color-black !default;
$acms-form-select-line-height: 1.15 !default; // 1だとディセンタの存在する文字列で文字が切れることがあるので1.15に設定
$acms-form-select-text-align: left !default;

// multiple
$acms-form-multiple-bg-color: $acms-color-white !default;
$acms-form-multiple-hover-bg-color: $acms-color-gray20 !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?v=2' !default;

// ラベル
$acms-form-label-margin-bottom: 0.5rem !default;
$acms-form-label-font-size: null !default;
$acms-form-label-font-style: null !default;
$acms-form-label-font-weight: null !default;
$acms-form-label-color: null !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;

// ------------------------------
//  Elevation
// ------------------------------
$acms-shadow-elevation-color: rgb(51 51 51 / 20%) !default;
$acms-shadow-elevation-length-low: 0 1px 4px 0 !default;
$acms-shadow-elevation-length-middle: 0 2px 8px 0 !default;
$acms-shadow-elevation-length-high: 0 3px 12px 0 !default;
$acms-shadow-elevation-low: $acms-shadow-elevation-length-low $acms-shadow-elevation-color !default;
$acms-shadow-elevation-middle: $acms-shadow-elevation-length-middle $acms-shadow-elevation-color !default;
$acms-shadow-elevation-high: $acms-shadow-elevation-length-high $acms-shadow-elevation-color !default;

// Spacing
//
// Control the default styling of most elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$acms-spacer: 0.25rem !default;
$acms-spacers: (
  0: 0,
  1: $acms-spacer * 1,
  2: $acms-spacer * 2,
  3: $acms-spacer * 3,
  4: $acms-spacer * 4,
  5: $acms-spacer * 5,
  6: $acms-spacer * 6,
  7: $acms-spacer * 7,
  8: $acms-spacer * 8,
  9: $acms-spacer * 9,
  10: $acms-spacer * 10,
  11: $acms-spacer * 11,
  12: $acms-spacer * 12,
  13: $acms-spacer * 13,
  14: $acms-spacer * 14,
  15: $acms-spacer * 15,
  16: $acms-spacer * 16,
  17: $acms-spacer * 17,
  18: $acms-spacer * 18,
  19: $acms-spacer * 19,
  20: $acms-spacer * 20,
) !default;

// Position
//
// Define the edge positioning anchors of the position utilities.

$acms-position-values: (
  0: 0,
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%,
) !default;

// Stretch
$acms-stretch-pseudo-element: after !default;
$acms-stretch-z-index: 1 !default;
