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

.styles-tab-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.theme-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 24px;
	overflow: visible;

	border-radius: 0;

	> * {
		flex: 1;
		align-self: start;
	}

	.theme-icon-button {
		text-align: center;

		.theme-image {
			width: 96px;
			height: 96px;

			border-radius: 12px;
			cursor: pointer;

			&.selected {
				box-shadow: 0 0 0 8px main.$teal;
			}
		}

		.theme-icon-label {
			margin: 6px auto 0;

			font-weight: bolder;
			font-size: 1rem;
			text-transform: capitalize;
		}
	}
}

@include main.dark-theme {
	.theme-buttons {
		.theme-image {
			&.selected {
				box-shadow: 0 0 0 8px main.$sea-foam;
			}
		}
	}
}
