@use 'global/common' as global;

/* ------------------------------
 ユーティリティ
------------------------------- */
// ---------------
// フロート解除
// ---------------
// フロート解除(不可視)(予備)
.clearHidden {
  display: block;
  height: 0;
  margin: 0;
  clear: both;
  visibility: hidden;
  border: none;
}

// フロート解除(不可視)
.clearfix::after {
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  content: '.';
}

.clearfix {
  _display: inline-table;
  zoom: 1;
}

// ---------------
// ユーティリティ
// ---------------
// 右寄せ
.acms-float-right {
  float: right;
}

// 左寄せ
.acms-float-left {
  float: left;
}

// 回り込み解除
.acms-clear {
  clear: both;
}

// ---------------
// テキスト
// ---------------

//中央寄せ
.acms-text-center {
  text-align: center;
}

//右寄せ
.acms-text-right {
  text-align: right;
}

//左寄せ
.acms-text-left {
  text-align: left;
}

// 自動で改行させない
.acms-text-nowrap {
  white-space: nowrap;
}

// 上寄り
.acms-align-top {
  vertical-align: top;
}

// 中央寄り
.acms-align-middle {
  vertical-align: middle;
}

// 下寄り
.acms-align-bottom {
  vertical-align: bottom;
}

.acms-text-primary {
  color: global.$acms-color-info90;
}

.acms-text-info {
  color: global.$acms-color-gray90;
}

.acms-text-success {
  color: global.$acms-color-success90;
}

.acms-text-warning {
  color: global.$acms-color-warning90;
}

.acms-text-danger {
  color: global.$acms-color-danger70;
}

.acms-cell-text-center {
  text-align: center !important;
}

.acms-cell-text-right {
  text-align: right !important;
}

.acms-cell-text-left {
  text-align: left !important;
}

.acms-cell-text-nowrap {
  white-space: nowrap !important;
}

.acms-cell-text-bold {
  font-weight: bold !important;
}

.acms-cell-text-top {
  vertical-align: top !important;
}

.acms-cell-text-middle {
  vertical-align: middle !important;
}

.acms-cell-text-bottom {
  vertical-align: bottom !important;
}

// ---------------
// 角
// ---------------
.acms-round {
  border-radius: 10%;
}

.acms-circle {
  border-radius: 50%;
}

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

.acms-icon-bg {
  padding: 8px;
  color: global.$acms-icon-text-color;
  background-color: global.$acms-icon-default;

  @include global.font-size(18);
}

.acms-icon-bg-info {
  background-color: global.$acms-icon-info-color;
}

.acms-icon-bg-success {
  background-color: global.$acms-icon-color;
}

.acms-icon-bg-warning {
  background-color: global.$acms-icon-warning-color;
}

.acms-icon-bg-danger {
  background-color: global.$acms-icon-danger-color;
}

.acms-icon-bg > [class*='acms-icon-'] {
  vertical-align: baseline;
}

// ---------------
// 間隔
// ---------------

// Padding
.acms-padding-none {
  padding: 0 !important;
}

.acms-padding-mini {
  padding: 5px !important;
}

.acms-padding-small {
  padding: 10px !important;
}

.acms-padding-medium {
  padding: 15px !important;
}

.acms-padding-large {
  padding: 20px !important;
}

// Margin
.acms-margin-none {
  margin: 0 !important;
}

// 上方向
.acms-margin-top-mini {
  margin-top: 5px !important;
}

.acms-margin-top-small {
  margin-top: 10px !important;
}

.acms-margin-top-medium {
  margin-top: 20px !important;
}

.acms-margin-top-large {
  margin-top: 30px !important;
}

// 右方向
.acms-margin-right-mini {
  margin-right: 5px !important;
}

.acms-margin-right-small {
  margin-right: 10px !important;
}

.acms-margin-right-medium {
  margin-right: 20px !important;
}

.acms-margin-right-large {
  margin-right: 30px !important;
}

// 下方向
.acms-margin-bottom-mini {
  margin-bottom: 5px !important;
}

.acms-margin-bottom-small {
  margin-bottom: 10px !important;
}

.acms-margin-bottom-medium {
  margin-bottom: 20px !important;
}

.acms-margin-bottom-large {
  margin-bottom: 30px !important;
}

// 左方向
.acms-margin-left-mini {
  margin-left: 5px !important;
}

.acms-margin-left-small {
  margin-left: 10px !important;
}

.acms-margin-left-medium {
  margin-left: 20px !important;
}

.acms-margin-left-large {
  margin-left: 30px !important;
}

// inline 横積み
.acms-inline-space {
  display: inline;
  margin-right: 10px;
}

.acms-inline-space-left {
  display: inline;
  margin-left: 10px;
}

// ---------------
// ユーティリティ スマートフォン用
// ---------------
@media (max-width: global.$breakpoint-md-max) {
  .acms-clear-sp {
    clear: both;
  }

  .acms-float-none-sp {
    float: none;
  }

  // 幅いっぱい
  .acms-width-sp {
    width: 100% !important;
  }

  // 幅オート
  .acms-width-auto-sp {
    width: auto !important;
  }

  // 間隔 下左
  .acms-margin-sp {
    margin-bottom: 10px !important;
    margin-left: 10px !important;
  }

  // 間隔 上下
  .acms-margin-top-bottom-sp {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .acms-margin-top-bottom-small-sp {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  // 間隔 下
  .acms-margin-bottom-sp {
    margin-bottom: 10px !important;
  }

  // 上線
  .acms-border-top-sp {
    border-top: global.$acms-table-border !important;
  }

  // 下線
  .acms-border-bottom-sp {
    border-bottom: global.$acms-table-border !important;
  }

  // エディットテーブル 下線
  .acms-table-admin-edit .acms-border-bottom-sp {
    border-bottom: global.$acms-table-border !important;
  }

  // タイトル
  .acms-title-sp {
    font-size: 16px !important;
  }

  // 入力フォーム、テキストエリア、プルダウン
  .acms-form textarea,
  .acms-form input[type='text'] {
    width: 100%;
  }
}

// ---------------
// 画像
// ---------------
.acms-img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

// ---------------
// 高さと幅
// ---------------
//幅
.acms-width-max {
  width: 100% !important;
}

// 高さ
.acms-height-max {
  height: 100% !important;
}

// 幅と高さ
.acms-width-height-max,
.acms-width-height-max html,
.acms-width-height-max body {
  width: 100%;
  height: 100%;
}

// ---------------
// 表示・非表示
// ---------------

// ブロック
.acms-block {
  display: block !important;
}

// インライン
.acms-inline {
  display: inline !important;
}

// インラインブロック
.acms-inline-block {
  display: inline-block !important;
}

// インラインブロック
.acms-table-cell {
  display: table-cell !important;
}

// 非表示
.acms-hide {
  display: none !important;
}

// 大きいスマートフォン以下のとき
@media (max-width: global.$breakpoint-md-max) {
  // ブロック
  .acms-show-sp {
    display: block !important;
  }

  // インライン
  .acms-show-inline-sp {
    display: inline !important;
  }

  // 非表示
  .acms-hide-sp {
    display: none !important;
  }
}

@media (min-width: global.$breakpoint-md-min) {
  // タブレット以上のときは表示にします
  .acms-show-tablet {
    display: block !important;
  }

  // タブレット以上のときは非表示にします
  .acms-hide-tablet {
    display: none !important;
  }
}

@media (min-width: global.$breakpoint-lg-min) {
  // PCのときは表示にします
  .acms-show-pc {
    display: block !important;
  }

  // PCのときは非表示にします
  .acms-hide-pc {
    display: none !important;
  }
}

// global.$breakpoint-sm-max 以下
@media (max-width: global.$breakpoint-sm-max) {
  // ブロック
  .acms-block-xs {
    display: block !important;
  }

  // インライン
  .acms-inline-xs {
    display: inline !important;
  }

  // ブロック
  .acms-inline-block-xs {
    display: inline-block !important;
  }

  // インライン
  .acms-table-cell-xs {
    display: table-cell !important;
  }

  // 非表示
  .acms-hide-xs {
    display: none !important;
  }
}

// global.$breakpoint-sm-max 以上 global.$breakpoint-md-max以下
@media (min-width: global.$breakpoint-sm-min) and (max-width: global.$breakpoint-md-max) {
  // ブロック
  .acms-block-sm {
    display: block !important;
  }

  // インライン
  .acms-inline-sm {
    display: inline !important;
  }

  // ブロック
  .acms-inline-block-sm {
    display: inline-block !important;
  }

  // インライン
  .acms-table-cell-sm {
    display: table-cell !important;
  }

  // 非表示
  .acms-hide-sm {
    display: none !important;
  }
}

// global.$breakpoint-md-min 以上 global.$breakpoint-lg-max以下
@media (min-width: global.$breakpoint-md-min) and (max-width: global.$breakpoint-lg-max) {
  // ブロック
  .acms-block-md {
    display: block !important;
  }

  // インライン
  .acms-inline-md {
    display: inline !important;
  }

  // ブロック
  .acms-inline-block-md {
    display: inline-block !important;
  }

  // インライン
  .acms-table-cell-md {
    display: table-cell !important;
  }

  // 非表示
  .acms-hide-md {
    display: none !important;
  }
}

// global.$breakpoint-lg-min 以上 global.$breakpoint-xl-max以下
@media (min-width: global.$breakpoint-lg-min) and (max-width: global.$breakpoint-xl-max) {
  // ブロック
  .acms-block-lg {
    display: block !important;
  }

  // インライン
  .acms-inline-lg {
    display: inline !important;
  }

  // ブロック
  .acms-inline-block-lg {
    display: inline-block !important;
  }

  // インライン
  .acms-table-cell-lg {
    display: table-cell !important;
  }

  // 非表示
  .acms-hide-lg {
    display: none !important;
  }
}

// global.$breakpoint-xl-min以下
@media (min-width: global.$breakpoint-xl-min) {
  // ブロック
  .acms-block-xl {
    display: block !important;
  }

  // インライン
  .acms-inline-xl {
    display: inline !important;
  }

  // ブロック
  .acms-inline-block-xl {
    display: inline-block !important;
  }

  // インライン
  .acms-table-cell-xl {
    display: table-cell !important;
  }

  // 非表示
  .acms-hide-xl {
    display: none !important;
  }
}

// スクリーンリーダー用
//このクラスを適応した要素は、目では見えませんが、音声では認識できるようになります。
.acms-hide-visually {
  @include global.hide-visually;
}

@media (max-width: global.$breakpoint-sm-max) {
  .acms-hide-visually-xs {
    @include global.hide-visually;
  }
}

@media (min-width: global.$breakpoint-sm-min) and (max-width: global.$breakpoint-md-max) {
  .acms-hide-visually-sm {
    @include global.hide-visually;
  }
}

@media (min-width: global.$breakpoint-md-min) and (max-width: global.$breakpoint-lg-max) {
  .acms-hide-visually-md {
    @include global.hide-visually;
  }
}

@media (min-width: global.$breakpoint-lg-min) and (max-width: global.$breakpoint-xl-max) {
  .acms-hide-visually-lg {
    @include global.hide-visually;
  }
}

@media (min-width: global.$breakpoint-xl-min) {
  .acms-hide-visually-xl {
    @include global.hide-visually;
  }
}

//プリント用クラス
@media print {
  .acms-print-block {
    display: block !important;
  }

  .acms-print-inline {
    display: inline !important;
  }

  .acms-print-inline-block {
    display: inline-block !important;
  }

  .acms-print-hide {
    display: none !important;
  }
}
