/*
 * Copyright (c) 2022 Ford Motor Company
 * All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use 'colors';

@mixin button-defaults {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 7.813rem;
	height: 2.75rem;
	padding: 0 1.5rem;

	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
	text-transform: capitalize;
	text-decoration: none;

	border: 0;
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
}

$box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.12),
	0 1px 8px rgba(0, 0, 0, 0.1);

@mixin button-primary {
	@include button-defaults;
	width: 100%;
	margin: 0.5rem auto 0;

	color: colors.$white;

	text-decoration: none;

	background-color: colors.$teal;
	box-shadow: $box-shadow;

	&:disabled {
		cursor: initial;
		opacity: 0.3;
	}

	&:hover:not(:disabled),
	&:focus:not(:disabled) {
		background-color: colors.$sea-foam;
	}

	.dark-theme & {
		color: colors.$black-asphalt;
		background-color: colors.$sea-foam;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			color: colors.$white;
		}
	}
}

@mixin button-secondary {
	@include button-defaults;
	width: 100%;
	margin: 0.5rem auto 0;

	color: colors.$teal;

	border: 2px solid colors.$teal;
	box-shadow: $box-shadow;

	&:focus,
	&:hover {
		color: colors.$white;
		background-color: colors.$teal;
	}

	.dark-theme & {
		color: colors.$sea-foam;
		border: 2px solid colors.$sea-foam;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			color: colors.$white;

			background-color: colors.$sea-foam;
			border: 2px solid colors.$sea-foam;
		}
	}
}

@mixin button-tertiary {
	margin: 1rem auto;

	color: colors.$teal;
	font-weight: bold;

	&:hover,
	&:focus {
		color: colors.$sea-foam;
	}

	.dark-theme & {
		margin: 1rem auto 0;
		color: colors.$sea-foam;

		&:hover,
		&:focus {
			color: colors.$light-green;
		}
	}
}
