@use "global/common" as global;

/* ------------------------------
 トースト
------------------------------- */
.acms-toast {
	position: fixed;
	top: 100%;
	right: 10px;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 300px;
	box-shadow: 0 3px 6px rgba(0,0,0,.15);
	transform: translateY(-100%);
	transition: transform .4s ease;
}
.acms-toast-header {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	color: global.$acms-toast-text-color;
	background: global.$acms-toast-default;
	border-radius: 3px 3px 0 0;
	@include global.font-size(14);
}
.acms-toast-icon-btn {
	padding: 0;
	color: global.$acms-toast-black;
	background: transparent;
	border: 0;
	appearance: none;
}
.acms-toast-heading {
	display: flex;
	flex: 1;
	width: 100%;
	margin: 0 0 0 10px;
	color: global.$acms-toast-text-color;
	line-height: 1.3;
	@include global.font-size(14);
}
.acms-toast-body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	color: #333;
	background: #FFF;
	transition: opacity .2s;
	@include global.font-size(13);
}
.acms-toast-lead {
	margin: 0 0 15px 0;
	@include global.font-size(16);
	font-weight: bold;
	line-height: 1.5;
}
.acms-toast-desc {
	margin: 0;
	@include global.font-size(13);
	line-height: 1.7;
}
.acms-toast-desc + .acms-toast-desc {
	margin-top: 0;
}
.acms-toast-body *:first-chid,
.acms-toast-desc:first-chid {
	background: red;
}
.acms-toast-footer {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	background: #FFF;
}
.acms-toast-body + .acms-toast-footer {
	padding-top: 0;
}


.acms-toast-closed {
	transform: translateY(-36px);
}

.acms-toast-success {
	.acms-toast-header {
		color: global.$acms-toast-text-success-color;
		background: global.$acms-toast-success-color;
	}
	.acms-toast-heading,
	.acms-toast-icon-btn {
		color: global.$acms-toast-text-success-color;
	}
}
.acms-toast-info {
	.acms-toast-header {
		color: global.$acms-toast-text-info-color;
		background: global.$acms-toast-info-color;
	}
	.acms-toast-heading,
	.acms-toast-icon-btn {
		color: global.$acms-toast-text-info-color;
	}
}
.acms-toast-warning {
	.acms-toast-header {
		color: global.$acms-toast-text-warning-color;
		background: global.$acms-toast-warning-color;
	}
	.acms-toast-heading,
	.acms-toast-icon-btn {
		color: global.$acms-toast-text-warning-color;
	}
}
.acms-toast-danger {
	.acms-toast-header {
		color: global.$acms-toast-text-danger-color;
		background: global.$acms-toast-danger-color;
	}
	.acms-toast-heading,
	.acms-toast-icon-btn {
		color: global.$acms-toast-text-danger-color;
	}
}
.js-admin-toast-toggle {
	z-index: global.zIndex(js-admin-toast-toggle);
}


@media screen and (max-width: global.$breakpoint-md-max){
	.acms-toast.acms-toast-static-md {
		position: static;
		top: auto;
		left: auto;
		max-width: inherit;
		margin: 0 0 15px 0;
		transform: translateY(0);
	}
}
