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

.toast {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 25rem;

	padding: 0.625rem 0 0.625rem 1rem;

	color: main.$black;

	font-family: 'Quicksand', sans-serif;

	background-color: main.$white;
	border-left: 1.125rem solid main.$gray-3;
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);

	.title {
		margin: 0 0 0.375rem;

		font-weight: bold;
		font-size: 1.125rem;
	}

	.content {
		margin: 0;

		font-weight: normal;
		font-size: 0.875rem;
	}

	.close-button {
		margin: 0;
		padding: 0 1.25rem;

		color: main.$gray-3;
		font-weight: bold;
		font-size: 0.75rem;
		text-transform: uppercase;

		border-left: 1px solid main.$off-white;
	}

	&.error {
		border-left: 1.125rem solid main.$red;

		.title {
			color: main.$red;
		}
	}

	&.warning {
		border-left: 1.125rem solid main.$yellow;

		.title {
			color: main.$yellow;
		}
	}

	&.info {
		border-left: 1.125rem solid main.$blue;

		.title {
			color: main.$blue;
		}
	}
}

@include main.dark-theme {
	.toast {
		color: main.$off-white;

		background-color: main.$asphalt;
		border-left: 1.125rem solid main.$gray-3;

		.close-button {
			border-left: 1px solid main.$gray-3;
		}

		&.error {
			border-left: 1.125rem solid main.$red;

			.title {
				color: main.$red;
			}
		}

		&.warning {
			border-left: 1.125rem solid main.$dark-yellow;

			.title {
				color: main.$dark-yellow;
			}
		}

		&.info {
			border-left: 1.125rem solid main.$dark-blue;

			.title {
				color: main.$dark-blue;
			}
		}
	}
}
