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

// ---------------
//　ボタン
// ---------------
@mixin btn-colors($start-color, $end-color, $color){
	color: $color;
	background-color: $end-color;
	background-image: linear-gradient(to bottom, $start-color, $end-color);
}

// ベース
@mixin btn-base(){
	color: #FFF;
	font-weight: bold;
	line-height: 1.3;
	border: 0;

	 &:hover,
	 &:visited {
		color: #FFF;
		text-decoration: none;
	}

	 &:focus,
	 &:active {
		color: #FFF;
		box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 50%);
	}
}

// サイズ小
@mixin btn-small(){
	display: inline-block;
	padding: 6px 15px;
	border-radius: 3px;
}

// サイズ大
@mixin btn-large(){
	display: inline-block;
	padding: 15px 20px;
	text-align: center;
	border-radius: 5px;

	@include acms.font-size(20);
}

// ブロック
@mixin btn-search-block(){
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	padding: 10px 20px;

	@include acms.font-size(20);
}

// フッターSNSボタン
@mixin footer-sns-list($sns-color){
	display: block;
	width: 30px;
	height: 30px;
	color: #FFF;
	line-height: 1.4;
	text-align: center;
	background: $sns-color;
	border-radius: 4px;

	@include acms.font-size(19);

	 &::before {
		  vertical-align: middle;
	}
}

// エントリー下シェアボタン
@mixin share-sns-btn($sns-color){
	position: relative;
	color: $sns-color;
	line-height: 1.2;

	 &::before {
		vertical-align: middle;
	}

	&:focus::before {
		position: absolute;
		inset: -1px;
		border: 1px dotted #333;
		content: "";
	}
}
