@use "sass:math";
@use "global/common" as global;


/* ------------------------------
 ボタン デフォルト
------------------------------- */
.acms-btn {
	@include global.button-shape($padding: (math.div(global.$acms-form-height-sp - global.$acms-btn-font-size - 2px, 2)) global.$acms-btn-padding-x-sp);
	@include global.button-decoration(
		$border: 1px solid rgba(0,0,0,.2),
		$hover-bg-color: #F1F1F1,
		$hover-border-color: rgba(0,0,0,.3),
		$text-color: global.$acms-btn-text-default-color,
		$active-border-color: global.$acms-btn-active-border-color,
		$active-bg-color: #E1E1E1,
		$active-box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
		$active-text-color: #333,
		$focus-border-color: global.$acms-btn-focus-border-color
	);

	@media (min-width: global.$breakpoint-md-min) {
		@include global.button-shape(
			$font-size: global.$acms-btn-font-size-desktop,
			$padding: (math.div(global.$acms-form-height - global.$acms-btn-font-size-desktop - 2px, 2)) global.$acms-btn-padding-x
		);
	}


	// ---------------
	// primary
	// ---------------
	&.acms-btn-primary {
			@include global.button-decoration(
		$bg-color: global.$acms-btn-primary-color-base,
		$hover-bg-color: global.$acms-btn-primary-color-darker,
		$text-color: global.$acms-btn-text-color,
		$hover-border-color: rgba(0,0,0,.3),
		$active-border-color: global.$acms-btn-primary-active-border,
		$active-box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
		$focus-border-color: global.$acms-btn-primary-focus-border-color
	);
	}

	// ---------------
	// info
	// ---------------
	&.acms-btn-info {
			@include global.button-decoration(
		$bg-color: global.$acms-btn-info-color-base,
		$hover-bg-color: global.$acms-btn-info-color-darker,
		$text-color: global.$acms-btn-text-color,
		$border-color: global.$acms-btn-info-border,
		$hover-border-color: rgba(0,0,0,.3),
		$active-border-color: rgba(0,0,0,.3),
		$focus-border-color: global.$acms-btn-info-focus-border-color
	);
	}

	// ---------------
	// success
	// ---------------
	&.acms-btn-success {
			@include global.button-decoration(
		$bg-color: global.$acms-btn-success-color-base,
		$hover-bg-color: global.$acms-btn-success-color-darker,
		$text-color: global.$acms-btn-text-color,
		$border-color: global.$acms-btn-success-border,
		$hover-border-color: rgba(0,0,0,.3),
		$active-border-color: rgba(0,0,0,.3),
		$focus-border-color: global.$acms-btn-success-focus-border-color
	);
	}

	// ---------------
	// warning
	// ---------------
	&.acms-btn-warning {
			@include global.button-decoration(
		$bg-color: global.$acms-btn-warning-color-base,
		$hover-bg-color: global.$acms-btn-warning-color-darker,
		$text-color: global.$acms-btn-text-color,
		$border-color: global.$acms-btn-warning-border,
		$hover-border-color: global.$acms-btn-warning-hover-border,
		$active-border-color: global.$acms-btn-warning-active-border,
		$focus-border-color: global.$acms-btn-warning-focus-border-color
	);
	}

	// ---------------
	// danger
	// ---------------
	&.acms-btn-danger {
			@include global.button-decoration(
		$bg-color: global.$acms-btn-danger-color-base,
		$hover-bg-color: global.$acms-btn-danger-color-darker,
		$text-color: global.$acms-btn-text-color,
		$border-color: global.$acms-btn-danger-border,
		$hover-border-color: global.$acms-btn-danger-hover-border,
		$active-border-color: global.$acms-btn-danger-active-border,
		$focus-border-color: global.$acms-btn-danger-focus-border-color
	);
	}

	// ---------------
	// link
	// ---------------
	&.acms-btn-link,
	.acms-btn-link:hover,
	.acms-btn-link:active,
	.acms-btn-link:visited {
			color: global.$acms-btn-link-color;
			text-decoration: underline;
			background: none;
			border-color: transparent!important;
			border-radius: 0;
		}
	// hover
	&.acms-btn-link:hover {
			color: global.$acms-btn-link-color-hover;
	}
	// active
	&.acms-btn-link:active {
			box-shadow: none;
	}
}




/* ---------------------------
   セレクトメニュー風ボタン
  --------------------------- */
.acms-select-btn {
	display: inline-block;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: button;
	@include global.select(
		$border-radius: 3px,
		$background-color: global.$acms-form-select-bg-color,
		$background-color-hover: global.$acms-form-select-bg-color
	);
}

@media (min-width: global.$breakpoint-md-min) {
	.acms-select-btn {
		@include global.desktop-select();
	}
}



/* ---------------------------
   ボタン フラット
  --------------------------- */

.acms-btn-flat {
  @include global.button-shape(
    $padding: (math.div(global.$acms-form-height-sp - global.$acms-btn-font-size - 2px, 2)) global.$acms-btn-flat-padding-x-sp,
		$border-radius: global.$acms-btn-flat-border-radius
	);
	@include global.button-decoration(
		$text-color: global.$acms-btn-flat-text-default-color,
		$bg-color: #EEEEEE,
		$border-color: rgba(0,0,0,.1),
		$hover-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
		$hover-bg-color: #D6D6D6,
		$hover-border-color: rgba(0,0,0,.2),
		$active-bg-color: rgba(0,0,0,.3),
		$active-border-color: #A6A6A6,
		$active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
		$focus-bg-color: #D6D6D6,
		$focus-border-color: global.$acms-btn-focus-border-color,
		$focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
	);
	font-weight: bold;
	line-height: 1.2;
	cursor: pointer;

	@media (min-width: global.$breakpoint-md-min) {
    @include global.button-shape(
      $font-size: global.$acms-btn-font-size-desktop,
      $padding: (math.div(global.$acms-form-height - global.$acms-btn-font-size-desktop - 2px, 2)) global.$acms-btn-flat-padding-x
    );
	}
}

// primary
.acms-btn-flat-primary {
	@include global.button-decoration(
		$text-color: global.$acms-btn-flat-text-color,
		$bg-color: global.$acms-btn-flat-primary-color,
		$border-color: rgba(0,0,0,.1),
		$hover-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
		$hover-bg-color: global.$acms-btn-flat-primary-hover-color,
		$hover-border-color: rgba(0,0,0,.2),
		$active-bg-color: global.$acms-btn-flat-primary-active-bg,
		$active-border-color: rgba(0,0,0,.3),
		$active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
		$focus-bg-color: global.$acms-btn-flat-primary-active-bg,
		$focus-border-color: global.$acms-btn-focus-border-color,
		$focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
	);
}

// info
.acms-btn-flat-info {
	@include global.button-decoration(
		$text-color: global.$acms-btn-flat-text-color,
		$bg-color: global.$acms-btn-flat-info-color,
		$border-color:rgba(0,0,0,.1),
		$hover-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
		$hover-bg-color: global.$acms-btn-flat-info-hover-color,
		$hover-border-color: rgba(0,0,0,.2),
		$active-bg-color: global.$acms-btn-flat-info-active-bg,
		$active-border-color: rgba(0,0,0,.3),
		$active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
		$focus-bg-color: global.$acms-btn-flat-info-active-bg,
		$focus-border-color: global.$acms-btn-focus-border-color,
		$focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
	);
}

// success
.acms-btn-flat-success {
	@include global.button-decoration(
		$text-color: global.$acms-btn-flat-text-color,
		$bg-color: global.$acms-btn-flat-success-color,
		$border-color: rgba(0,0,0,.1),
		$hover-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
		$hover-bg-color: global.$acms-btn-flat-success-hover-color,
		$hover-border-color: rgba(0,0,0,.2),
		$active-bg-color: global.$acms-btn-flat-success-active-bg,
		$active-border-color: rgba(0,0,0,.2),
		$active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
		$focus-bg-color: global.$acms-btn-flat-success-active-bg,
		$focus-border-color: global.$acms-btn-focus-border-color,
		$focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
	);
}

// warning
.acms-btn-flat-warning {
	@include global.button-decoration(
		$text-color: global.$acms-btn-flat-text-color,
		$bg-color: global.$acms-btn-flat-warning-color,
		$border-color: rgba(0,0,0,.1),
		$hover-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
		$hover-bg-color: global.$acms-btn-flat-warning-hover-color,
		$hover-border-color: rgba(0,0,0,.2),
		$active-bg-color: global.$acms-btn-flat-warning-active-bg,
		$active-border-color: rgba(0,0,0,.2),
		$active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
		$focus-bg-color: global.$acms-btn-flat-warning-active-bg,
		$focus-border-color: global.$acms-btn-focus-border-color,
		$focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
	);
}

// danger
.acms-btn-flat-danger {
	@include global.button-decoration(
		$text-color: global.$acms-btn-flat-text-color,
		$bg-color: global.$acms-btn-flat-danger-color,
		$border-color: rgba(0,0,0,.1),
		$hover-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
		$hover-bg-color: global.$acms-btn-flat-danger-hover-color,
		$hover-border-color: rgba(0,0,0,.2),
		$active-bg-color: global.$acms-btn-flat-danger-active-bg,
		$active-border-color: rgba(0,0,0,.3),
		$active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
		$focus-bg-color: global.$acms-btn-flat-danger-active-bg,
		$focus-border-color: global.$acms-btn-focus-border-color,
		$focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
	);
}


@if global.$admin == true {

	/* ---------------
		 管理画面のボタン
		--------------- */
		.acms-btn-admin {
			@include global.button-shape($padding: (math.div(global.$acms-form-height-sp - global.$acms-btn-font-size - 2px, 2)) global.$acms-btn-padding-x-sp);
			@include global.button-decoration(
				$border: 1px solid rgba(0,0,0,.2),
				$hover-bg-color: #F1F1F1,
				$hover-border-color: rgba(0,0,0,.3),
				$text-color: global.$acms-btn-text-default-color,
				$active-border-color: global.$acms-btn-active-border-color,
				$active-bg-color: #E1E1E1,
				$active-box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
				$active-text-color: #333,
				$focus-border-color: global.$acms-btn-focus-border-color
			);

			@media (min-width: global.$breakpoint-md-min) {
				@include global.button-shape(
					$font-size: global.$acms-btn-font-size-desktop,
					$padding: (math.div(global.$acms-form-height - global.$acms-btn-font-size-desktop - 2px, 2)) global.$acms-btn-padding-x
				);
			}
		}
	// ---------------
  // 管理画面のボタン primary
  // ---------------
		.acms-btn-admin-primary {
				@include global.button-decoration(
			$bg-color: global.$acms-btn-primary,
			$hover-bg-color: global.$acms-btn-primary-color-darker,
			$active-bg-color: global.$acms-btn-primary-color-darker,
			$text-color: #FFFFFF,
			$border-color: global.$acms-btn-primary-border,
			$hover-border-color: rgba(0,0,0,.2),
			$active-border-color: rgba(0,0,0,.2),
			$focus-border-color: global.$acms-btn-focus-border-color
		);
    }
	// ---------------
  // 管理画面のボタン info
  // ---------------
    .acms-btn-admin-info {
        @include global.button-decoration(
			$bg-color: global.$acms-btn-info,
			$hover-bg-color: global.$acms-btn-info-color-darker,
			$active-bg-color: global.$acms-btn-info-color-darker,
			$text-color: #FFFFFF,
			$border-color: global.$acms-btn-info-border,
			$hover-border-color: rgba(0,0,0,.2),
			$active-border-color: rgba(0,0,0,.2),
			$focus-border-color: global.$acms-btn-focus-border-color
		);
    }
	// ---------------
  // 管理画面のボタン danger
  // ---------------
  .acms-btn-admin-danger {
      @include global.button-decoration(
        $bg-color: global.$acms-btn-danger,
        $hover-bg-color: global.$acms-btn-danger-color-darker,
        $active-bg-color: global.$acms-btn-danger-color-darker,
        $text-color: #FFFFFF,
        $border-color: rgba(0,0,0,.1),
        $hover-border-color: rgba(0,0,0,.2),
        $active-border-color: rgba(0,0,0,.2),
        $focus-border-color: global.$acms-btn-focus-border-color
    );
  }

  // リンクのとき
  a.acms-btn,
  a.acms-btn-admin,
  a.acms-btn-flat {
      text-decoration: none;
  }

  // 保存ボタン
  .acms-btn-save,
  .acms-btn-admin-save {
		min-width: 150px;
  }

  .acms-btn-search,
  .acms-btn-admin-search {
    min-width: 150px;
  }
}

// ---------------
// ユーティリティ
// ---------------
// disabled
.acms-btn-disabled,
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="image"][disabled],
input[type="button"][disabled],
fieldset[disabled] .acms-btn {
    opacity: global.$acms-btn-disabled-opacity;
    filter: alpha(opacity=global.$acms-btn-disabled-opacity-ie);
    pointer-events: none;
		&:not(.acms-btn-active) {
			-webkit-box-shadow: none;
			box-shadow: none;
		}
}

// ブロックレベルのボタン
.acms-btn-block {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

// インライン
.acms-inline-btn {
    display: inline-block;
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
}

// サイズ小
.acms-btn-small {
    padding: (math.div(global.$acms-form-height-small-sp - global.$acms-btn-small-font-size - 2px, 2)) global.$acms-btn-small-padding-x;
    @include global.font-size(global.$acms-btn-small-font-size);

  @media screen and (min-width: global.$breakpoint-md-min){
    padding: (math.div(global.$acms-form-height-small - global.$acms-btn-small-font-size - 2px, 2)) global.$acms-btn-small-padding-x;
  }
}

// サイズ大
.acms-btn-large {
    padding: (math.div(global.$acms-form-height-large-sp - global.$acms-btn-large-font-size - 2px, 2)) global.$acms-btn-large-padding-x;
    @include global.font-size(global.$acms-btn-large-font-size);
    border-radius: global.$acms-btn-large-border-radius;

  @media screen and (min-width: global.$breakpoint-md-min){
    padding: (math.div(global.$acms-form-height-large - global.$acms-btn-large-font-size - 2px, 2)) global.$acms-btn-large-padding-x;
  }
}

//アイコンボタン
.acms-btn-icon {
	padding: global.$acms-btn-icon-padding;
	@include global.font-size(global.$acms-btn-icon-font-size);
}

.acms-btn-unstyled {
    padding: 0;
    background: 0;
    border: 0;
    &:focus {
        outline: 0;
    }
}
