@import './variables.styl';

.custom-block {
	.custom-block-title {
		font-weight: 600;
		margin-bottom: -0.4rem;
	}

	&.tip, &.warning, &.danger {
		padding: 0.1rem 1.5rem;
		border-left-width: 0.5rem;
		border-left-style: solid;
		margin: 1rem 0;
	}

	&.tip {
		background-color: lighten($tipGreen, 85%);
		border-color: $tipGreen;
		color: darken($tipGreen, 50%);

		.custom-block-title {
			color: darken($tipGreen, 20%);
		}

		a {
			color: $tipGreen;
		}
	}

	&.warning {
		background-color: rgba(255, 229, 100, 0.3);
		border-color: darken($warningYellow, 35%);
		color: darken($warningYellow, 70%);

		.custom-block-title {
			color: darken($warningYellow, 50%);
		}

		a {
			color: darken($warningYellow, 40%);
		}
	}

	&.danger {
		background-color: lighten($dangerRed, 90%);
		border-color: $dangerRed;
		color: darken($dangerRed, 50%);

		.custom-block-title {
			color: $dangerRed;
		}

		a {
			color: lighten($dangerRed, 15%);
		}
	}
}