@use "sass:math";
@use "../global/variables" as var;
@use "../mixins/font-size" as fontSize;

@mixin button-shape(
	$border-radius: 3px,
	$padding: (math.div(var.$acms-form-height-sp - var.$acms-btn-font-size - 2px, 2)) var.$acms-btn-padding-x,
	$font-size: var.$acms-btn-font-size,
	$font-size-desktop: var.$acms-btn-font-size-desktop
) {
		display: inline-block;
		padding: $padding;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		border-radius: $border-radius;
		transition: background-color .2s, border-color .2s;
		@include fontSize.font-size($font-size);
}

@mixin button-decoration(
	$bg-color: #F7F7F7,
	$active-bg-color: $bg-color,
	$hover-bg-color: $bg-color,
	$focus-bg-color: $bg-color,
	$border-radius: 3px,
	$border: 1px solid var.$acms-btn-border-color,
	$border-color: var.$acms-btn-border-color,
	$hover-border-color: var.$acms-btn-hover-border-color,
	$active-border-color: var.$acms-btn-active-border-color,
	$focus-border-color: var.$acms-btn-focus-border-color,
	$text-color: var.$acms-btn-text-default-color,
	$active-text-color: $text-color,
	$hover-text-color: $text-color,
	$focus-text-color: $text-color,
	$box-shadow: null,
	$active-box-shadow: $box-shadow,
	$hover-box-shadow: $box-shadow,
	$focus-box-shadow: var.$acms-btn-focus-box-shadow
) {
  color: $text-color;
  background-color: $bg-color;
	border: $border;
	transition: background-color .2s;

	// 色
	 &:link,
	 &:hover,
	 &:active,
	 &:visited {
		color: $text-color;
	}

	&:hover {
    text-decoration: none;
    background-color: $hover-bg-color;
		border-color: $hover-border-color;
		box-shadow: $hover-box-shadow;
	}

	// active
	 &:active,
	 &-active {
		color: $text-color;
		text-decoration: none;
		background-color: $active-bg-color;
		border-color: $active-border-color;
		box-shadow: $active-box-shadow;
	}

	&:active[disabled],
	&-active[disabled] {
		opacity: 1;
		filter: alpha(opacity=1);
	}

	// focus
	 &:focus {
		background-color: $focus-bg-color;
		border-color: $focus-border-color;
		outline: none;
		box-shadow: $focus-box-shadow;
	}
}

@mixin button-gradation($start-color:#F9F9F9, $end-color:#E1E1E1) {
	background-image: -moz-linear-gradient(top, $start-color, $end-color);
	background-image: -ms-linear-gradient(top, $start-color, $end-color);
	background-image: -o-linear-gradient(top, $start-color, $end-color);
	background-image: -webkit-gradient(linear, center top, center bottom, from($start-color), to($end-color));
	background-image: -webkit-linear-gradient(top, $start-color, $end-color);
	background-image: linear-gradient(top, $start-color, $end-color);
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)"));
}


// ログインボタン
//===============================

// 色
@mixin btn-color($start-color:#F9F9F9, $end-color:#E1E1E1, $base-color: $end-color, $color: #333){
	color: $color;
	background-color: $base-color;
}

// active
@mixin btn-color-active($background-color:#E1E1E1, $color: #333, $inset-color:#B2B2B2){
	color: $color;
	background-color: $background-color;
	box-shadow: inset 0 1px 2px $inset-color;
}
