/*
 * 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 '../../Styles/main';

.modal-container,
.modal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.modal-container {
	display: flex;
	overflow: scroll;

	z-index: 2;

	&[aria-hidden='true'] {
		display: none;
	}

	.modal-overlay {
		background-color: rgba(main.$black, 0.5);
	}

	.modal-content {
		width: 100%;
		height: 100%;
		margin: auto;
		padding: 0 0.8rem;

		color: main.$asphalt;
		font-family: 'Quicksand', sans-serif;
		font-weight: normal;
		font-size: 1rem;

		z-index: 2;
		position: relative;

		@include main.breakpoint-medium {
			width: unset;
			height: unset;
		}

		&.super-size {
			border-radius: 15px;

			@include main.breakpoint-medium {
				transform: scale(1.5);
			}

			@include main.breakpoint-large {
				transform: scale(1.65);
			}

			.modal-close-button {
				@include main.breakpoint-medium {
					margin: 0.8rem 1.5rem 0 0;
					font-size: 0.7rem;
				}
			}
		}

		.modal-title {
			display: none;
		}

		.modal-close-button {
			margin: 0.8rem 1.5rem 0 0;

			font-size: 1rem;

			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;

			@include main.breakpoint-medium {
				margin: 0.5rem 1.4rem 0 0;
			}
		}
	}
}

@include main.dark-theme {
	.modal-close-button {
		color: main.$white;
	}
}
