favycon/components/button/index.module.scss

@import '../../styles/variables.scss';

.base {
	padding: 5px 12px;
	font-family: 'Manrope', Arial, '"Helvetica Neue"', Helvetica, sans-serif;
	font-size: $font-size-title;
	line-height: $line-height-title;
	color: $black;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.2s ease;

	@include breakpoint-md {
		padding: 9px 12px;
	}

	&:hover,
	&:focus,
	&:active {
		outline: none;
	}

	@media (pointer: fine) {
		&:hover {
			transform: translate3d(0, -2px, 0);
		}

		&:active {
			transform: translate3d(0, 0, 0);
		}
	}
}

.primary {
	composes: base;
	background-color: $off-white;
	border: 1px solid $light-grey;
	box-shadow: 0 2px 4px 0 rgba($black, 0.12);
	transition: all 0.2s ease;

	&:disabled {
		color: $grey;
	}
}

:global(.dark) .primary {
	color: $white;
	background-color: $dark-black;
	border: 1px solid $dark-black;

	&:disabled {
		color: $grey;
	}
}

.transparent {
	composes: base;
	padding: 5px 0;
	background: transparent;
	border: 1px solid transparent;

	@include breakpoint-md {
		padding: 9px 0;
	}
}

:global(.dark) .transparent {
	@include breakpoint-md {
		background: $dark-grey;
	}
}

.modalClose {
	composes: base;
	padding: 5px 16px;
	background-color: $off-white;
	border: 1px solid $light-grey;
	border-radius: 18px;
}

.regularTransparent {
	composes: base;
	padding: 0;
	font-size: $font-size-regular-body;
	line-height: $line-height-regular-body;
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border: 0;
}

.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.semiBold {
	font-weight: 600;
}

.bold {
	font-weight: 700;
}

.black {
	color: $black;
}

.gray {
	color: $grey;
}

:global(.dark) .gray {
	color: $grey-dark;

	@include breakpoint-md {
		color: $off-white-dark;
	}
}

.white {
	color: $white;
}

.link {
	color: $black;

	&:hover {
		color: $link;
	}
}

:global(.dark) .link {
	color: $white;

	&:hover {
		color: $link-dark;
	}
}

.bgLink {
	background: $link;
	border-color: $link;

	&:hover {
		background: $link-hover;
		border-color: $link-hover;
	}
}

:global(.dark) .bgLink {
	background: $link-dark;
	border-color: $link-dark;

	&:hover {
		background: $link-hover;
		border-color: $link-hover;
	}
}

.bgGreen {
	background: $green;
	border-color: $green;

	&:hover {
		background: $green-hover;
		border-color: $green-hover;
	}
}

:global(.dark) .bgGreen {
	background: $green;
	border-color: $green;

	&:hover {
		background: $green-hover;
		border-color: $green-hover;
	}
}

.bgDarkGray {
	background: $dark-grey;
	border-color: $dark-grey;

	&:hover {
		background: $darker-grey;
		border-color: $darker-grey;
	}
}