/*
 * 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 'sizes';
@use 'colors';

@mixin breakpoint-medium {
	@media (min-width: 768px) {
		@content;
	}
}

@mixin breakpoint-large {
	@media (min-width: 992px) {
		@content;
	}
}

@mixin prefers-animations {
	@media (prefers-reduced-motion: no-preference) {
		@content;
	}
}

@mixin subheader {
	height: 2.81rem;
	background-color: colors.$white;

	> :only-child {
		@include site-max-width;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	ul {
		height: 100%;
	}

	.dark-theme & {
		background-color: rgba(colors.$black, 0.22);
	}
}

@mixin dark-theme {
	.dark-theme {
		@content;
	}
}

@mixin inside-modal {
	.modal-container {
		@content;
	}
}

@mixin box-shadow($size, $color) {
	/* stylelint-disable */
	box-shadow: 0 0 0 $size $color;
	-webkit-box-shadow: 0 0 0 $size $color;
	-moz-box-shadow: 0 0 0 $size $color;

	-webkit-appearance: none;
	/* stylelint-enable */
}

@mixin site-max-width() {
	max-width: sizes.$max-width;
	margin: 0 auto;
	padding-right: sizes.$global-side-padding-mobile;
	padding-left: sizes.$global-side-padding-mobile;

	@include breakpoint-medium {
		padding-right: sizes.$global-side-padding;
		padding-left: sizes.$global-side-padding;
	}
}

@mixin white-form {
	max-width: 540px;
	margin: 10% auto 1rem;
	padding: 3rem 3.5rem 4.5rem;

	background-color: colors.$white;
	border-radius: 5px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.12),
		0 12px 24px rgba(0, 0, 0, 0.12), 0 1px 32px rgba(0, 0, 0, 0.12);

	h1 {
		margin: 0;

		font-size: 2.5rem;
		line-height: 3.125rem;
		white-space: nowrap;
		text-align: center;
	}

	p {
		color: colors.$dark-gray;

		font-family: 'Quicksand', serif;
		font-weight: 600;
		font-size: 1rem;
		font-style: normal;
		line-height: 1.25rem;
	}

	.success-indicator {
		margin: 1rem 0 2rem;

		color: colors.$teal;
		font-family: 'Quicksand', serif;
		font-weight: 700;
		font-size: 20px;
		font-style: normal;
		line-height: 25px;
		text-align: center;
	}

	.dark-theme & {
		color: colors.$off-white;
		background-color: colors.$asphalt;

		p {
			color: inherit;
		}
	}
}
