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

.archived-board-tile {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 2rem;

	font-weight: bold;
	font-size: 1rem;
	line-height: 2rem;

	background: main.$white;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.12) 0 0.25rem 1.25rem 0;

	.archived-board-tile-checkbox {
		margin: 1.5rem;
	}

	.thought-count {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		margin: 1rem;

		text-align: center;

		background: main.$off-white;
		border-radius: 20px;
	}

	.date-label {
		padding: 1rem;
	}

	.delete-button,
	.view-button {
		padding: 1rem 1.5rem;
		border-left: 1px solid main.$off-white;
	}

	.view-button {
		color: main.$asphalt;
		text-decoration: none;

		&:hover {
			color: main.$teal;
		}
	}

	.delete-button {
		color: main.$red;

		&:hover {
			color: main.$white;

			background-color: main.$red;
			border-radius: 0 6px 6px 0;
		}
	}
}

@include main.dark-theme {
	.archived-board-tile {
		color: main.$off-white;
		background: main.$light-asphalt;

		.thought-count {
			background-color: rgba(main.$black, 0.22);
		}

		.delete-button,
		.view-button {
			color: main.$gray-2;
			border-left: 1px solid main.$asphalt;
		}

		.view-button {
			&:hover {
				color: main.$sea-foam;
			}
		}

		.delete-button {
			color: main.$light-red;

			&:hover {
				color: main.$off-white;
				background-color: main.$dark-red;
			}
		}
	}
}
