@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　AMPテンプレート専用のコンポーネント
------------------------------ */

.amp-offcanvas {
	background: #FFF;
}

.amp-offcanvas-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	display: block;
	width: 50px;
	height: 50px;
	padding: 16px 0;
	background: #333;
	border: none;
	border-radius: 10px;
	cursor: pointer;

	&:focus {
		border-color: #137af3;
		outline: 0;
		box-shadow: 0 0 0 3px rgb(19 122 243 / 40%);
	}
}

.amp-offcanvas-btn-line {
	display: block;
	width: 20px;
	height: 3px;
	margin: 0 auto 4px;
	background: #fff;
}


.amp-btn {
	@include acms.button-shape($padding: (acms.$acms-form-height-sp - acms.$acms-btn-font-size -2px) /2 acms.$acms-btn-padding-x-sp);
	@include acms.button-decoration(
		$border: 1px solid rgba(0, 0, 0, .2),
		$hover-bg-color: #F1F1F1,
		$hover-border-color: rgba(0, 0, 0, .3),
		$text-color: acms.$acms-btn-text-default-color,
		$active-border-color: acms.$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: acms.$acms-btn-focus-border-color
	);

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


// サイズ大
.amp-btn-large {
	padding: (acms.$acms-form-height-large-sp - acms.$acms-btn-large-font-size -2px) /2 acms.$acms-btn-large-padding-x;

	@include acms.font-size(acms.$acms-btn-large-font-size);

	border-radius: acms.$acms-btn-large-border-radius;

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


.entry-body .amp-btn {
	border-style: solid;
}
