@use "global/common" as global;

/* ------------------------------
 パネル
------------------------------- */
.acms-panel {
	margin-bottom: 10px;
	border: 1px solid global.$acms-panel-black-border;
}

.acms-panel-header {
	margin: 0;
	padding: 10px;
	background-color: global.$acms-panel-black-bg;
	border-bottom: 1px solid global.$acms-panel-black-border;

	&,
	& a {
		color: global.$acms-panel-black-text-color;
	}
}

.acms-panel-body + .acms-panel-header {
	border-top: 1px solid global.$acms-panel-black-border;
}

//フォントサイズ
.acms-panel-header [class*='acms-icon'] {
	@include global.font-size(20);
}

.acms-panel-title {
	margin: 0;
	@include global.font-size(15);
	>a {
		color: inherit;
		 &:hover {
			color: inherit;
			opacity: 0.6;
		}
	}
}

.acms-panel-body {
	margin: 0;
	padding: 10px;
}

.acms-panel-footer {
	padding: 10px;
	border-top: 1px solid #DDD;
}

// info
.acms-panel-info {
	 &.acms-panel {
		border-color: global.$acms-panel-info-border;
	}
	.acms-panel-header,
	.acms-panel-header a {
		color: global.$acms-panel-info-text-color;
		background-color: global.$acms-panel-info-bg;
		border-color: global.$acms-panel-info-border;
	}
	.acms-panel-footer {
		border-color: global.$acms-panel-info-border;
	}
}
// danger
.acms-panel-danger {
	 &.acms-panel {
		border-color: global.$acms-panel-danger-border;
	}
	.acms-panel-header,
	.acms-panel-header a {
		color: global.$acms-panel-danger-text-color;
		background-color: global.$acms-panel-danger-bg;
		border-color: global.$acms-panel-danger-border;
	}
	.acms-panel-footer {
		border-color: global.$acms-panel-danger-border;
	}
}
