@import "../colors";
@import "../breakpoints";

main {
	button, .button {
		outline: none;
		box-shadow: none;
		border: none;
		background-color: $musare_color_primary_blue;
		color: $musare_color_white;
		text-align: center;
		display: block;
		width: 100%;
		text-decoration: none;
		transition: .1s ease;

		font-size: 17px;
		line-height: 22px;
		padding: 9px 0;
		margin-bottom: 16px;

		&:hover, &:focus {
			background-color: $musare_color_secondary_blue;
			color: $musare_color_white;
			cursor: pointer;
		}

		&[disabled] {
			opacity: .4;
		}
	}
}

.gray-button {
	background-color: $musare_color_secondary_gray;

	&:hover, &:focus {
		background-color: $musare_color_primary_gray; //TODO Fix these colors
		cursor: pointer;
	}
}

.red-button {
	background-color: $musare_color_primary_red;

	&:hover, &:focus {
		background-color: $musare_color_secondary_red; //TODO Fix these colors
		cursor: pointer;
	}
}