@use "global/common" as global;

/* ------------------------------
 ユーティリティ
------------------------------- */
// ---------------
// フロート解除
// ---------------
// フロート解除(不可視)(予備)
.clearHidden {
	display: block;
	clear: both;
	height: 0;
	margin: 0;
	border: none;
	visibility: hidden;
}
// フロート解除(不可視)
.clearfix:after {
	display: block;
	clear: both;
	height: 0;
	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: #004cc5;
}
.acms-text-info {
	color: #4b4b4b;
}
.acms-text-success {
	color: #618e00;
}
.acms-text-warning {
	color: #C57300;
}
.acms-text-danger {
	color: #C5001D;
}

.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;
	@include global.font-size(18);
	color: global.$acms-icon-text-color;
	background-color: global.$acms-icon-default;
}
.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;
	}
}
