@use 'vars' as *;
@use 'sass:color';

@mixin msg($color) {
	background-color: color.scale($color, $lightness: 70%);
	border: 1px solid $color;

	padding: 10px;
	width: 60%;
	margin: 10px auto;
}

.success { @include msg($c-green); }
.warning { @include msg($c-yellow); }
.error   { @include msg($c-red); }

/* ----------------------------------------------------------------------------- &PAGINATION ---- */

.pagination {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-top: 20px;

	a { text-decoration: none; }
}

.pagination__item {
	@extend %btn;
	margin: 0;

	&:not(:last-child) { border-right: none; }
}

.pagination__item--disabled, .pagination__item--active {
	@extend .pagination__item;
	@extend %disabled;
}

/* ----------------------------------------------------------------------------------- &BTNS ---- */

.btn--table {
    @extend %btn;
    margin: 0;
}