/*
 * 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-boards-list {
	@include main.site-max-width;
	max-width: 46.75rem;
	padding: 3.125rem;

	.thoughts-archive-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 1.5rem 0;

		font-weight: 600;
		font-size: 1.5rem;
		white-space: nowrap;

		@include main.breakpoint-medium {
			justify-content: unset;
		}

		.thoughts-archive-metadata {
			margin-top: 0;

			color: main.$mid-gray;
			font-weight: 500;
			font-size: 0.8rem;

			@include main.breakpoint-medium {
				position: absolute;
				left: 46.5%;
			}
		}
	}

	.delete-selected-button {
		width: 100%;
		height: 2.25rem;
		margin-bottom: 1rem;

		color: main.$white;
		font-weight: 700;
		font-size: 1rem;

		background-color: main.$red;
		border-radius: 3px;

		&:focus,
		&:hover {
			background-color: main.$dark-red;
		}
	}

	.list {
		width: 100%;
		margin: 0 auto 1rem;
	}
}

@include main.dark-theme {
	.archived-boards-list {
		.thoughts-archive-title {
			color: main.$off-white;
		}

		.delete-selected-button {
			color: main.$off-white;
			background-color: main.$dark-red;

			&:focus,
			&:hover {
				background-color: main.$red;
			}
		}
	}
}
