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

.dropdown {
	box-sizing: border-box;
	width: 7.25rem;
	height: 2.81rem;

	color: main.$asphalt;

	border: 2px solid main.$asphalt;
	border-radius: 5px;

	position: relative;

	.visually-hidden {
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;

		white-space: nowrap;

		border: 0;

		clip: rect(0 0 0 0);

		position: absolute;
	}

	.select {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;

		padding-left: 1.32rem;

		color: inherit;
		font-family: inherit;
		font-weight: 500;
		font-size: 1.5rem;
		line-height: 1.87rem;

		background-color: transparent;
		border: 0;
		border-radius: 4px;
		cursor: pointer;

		appearance: none;
	}

	.select-arrow {
		pointer-events: none;

		position: absolute;
		top: 10px;
		right: 10px;
	}
}

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

		background-color: main.$black-asphalt;
		border: 2px solid main.$off-white;
	}
}
