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

$timer-height: 2.81rem;

.timer {
	display: flex;

	> * {
		margin-right: 0.5rem;
	}

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

		white-space: nowrap;

		clip: rect(0 0 0 0);
		clip-path: inset(50%);

		position: absolute;
	}

	.timer-count-down {
		box-sizing: border-box;
		width: 7.25rem;
		height: $timer-height;

		color: main.$asphalt;
		font-family: inherit;
		font-weight: 500;
		font-size: 1.5rem;
		line-height: 1.87rem;

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

		:first-child {
			width: 3.85rem;
		}
	}

	.timer-count-down,
	[class*='-button'] {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;

		border-radius: 5px;

		.timer-icon {
			color: main.$white;
		}
	}

	[class*='-button'] {
		width: $timer-height;
		height: $timer-height;
	}

	.reset-button {
		background: main.$red;
	}

	.start-button {
		background: main.$green;
	}

	.pause-button {
		background: main.$yellow;
	}
}

@include main.dark-theme {
	.timer {
		.timer-count-down {
			color: main.$off-white;

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

		.reset-button {
			background: main.$dark-red;
		}

		.start-button {
			background: main.$dark-green;
		}

		.pause-button {
			background: main.$dark-yellow;
		}
	}
}
