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

.settings {
	@include main.white-modal-base;

	display: flex;
	flex-direction: column;
	margin: 0.5rem 0 3rem;

	position: relative;

	@include main.breakpoint-medium {
		width: 34.5rem;
		min-height: 450px;
		margin: auto;
	}

	.settings-title {
		@include main.white-modal-title;
	}

	.settings-subtitle {
		width: 100%;
		margin-bottom: 1rem;

		color: main.$dark-gray;
		font-family: 'Quicksand', serif;
		font-weight: 600;
		font-size: 1.25rem;
		font-style: normal;
		line-height: 1.56rem;

		text-align: center;
		text-transform: capitalize;

		cursor: default;

		@include main.breakpoint-medium {
			font-size: 1.2rem;
		}
	}

	.tab-container {
		flex: 1;
		width: 100%;
	}
}

.tab-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 235px;
	margin: 6px auto 36px;
	overflow: hidden;

	font-size: 1.2rem;
	text-align: center;

	border-radius: 6px;

	.tab {
		width: 50%;
		padding: 9px;

		font-weight: bold;
		white-space: nowrap;
		text-transform: capitalize;

		background-color: main.$off-white;
		cursor: pointer;

		&.selected {
			color: main.$white;
			background-color: main.$teal;
		}

		&:not(:last-child) {
			border-right: 2px solid rgba(main.$asphalt, 0.08);
		}
	}
}

.tab-body {
	.label {
		font-weight: bold;
		font-size: 1.1rem;
		text-align: center;
		text-transform: capitalize;

		@include main.breakpoint-medium {
			font-size: 1.5rem;
		}
	}

	.description {
		color: main.$dark-gray;
		font-weight: 600;
	}
}

@include main.dark-theme {
	.settings {
		.settings-subtitle {
			color: main.$light-gray;
		}
	}

	.tab-container {
		color: main.$white;
	}

	.tab-body {
		.description {
			color: main.$light-gray;
		}
	}

	.tab {
		background-color: rgba(main.$black, 0.22);

		&.selected {
			color: main.$black-asphalt;
			background-color: main.$sea-foam;
		}
	}
}
