style.scss

@use 'sass:color';
@import './../../../styles/foundation/variables';

$btnTextColor: #fff;
$btnBgColor: #545a78;

.btn {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	outline: 0;
	margin: 0;
	vertical-align: middle;

	font-family: $mainFont;
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.75;
	text-transform: uppercase;
	border-radius: 4px;

	color: $btnTextColor;
	background: $btnBgColor;
	padding: 6px 16px;
	min-width: 22px;
	min-height: 22px;
	border: none;

	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
		box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
		color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

	&:hover {
		background-color: #3a3e54;
	}

	&.size-small {
		padding: 0;
		:hover {
			text-decoration: none;
			background-color: rgba(255, 255, 255, 0.08);
		}
	}

	&.disabled {
		color: color.adjust($btnTextColor, $lightness: -40%);
		background: color.adjust($btnBgColor, $lightness: -10%);
		pointer-events: none;
		cursor: inherit;
	}

	&.btn-active {
		color: #fff;
		background: #e63232;

		&:hover {
			background: #541313;
		}
	}
	&.btn-inactive {
		color: #ddd;
		background: #8e8e8e;

		&:hover {
			background: #333;
		}
	}
}