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

.delete-column-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	font-family: inherit;
	font-weight: bold;

	background-color: main.$white;
	border-radius: 6px;
	box-shadow: 0 0 0 4px main.$red;

	.column-item-button-group {
		border-top: 0;
	}

	.column-item-button {
		&.confirm {
			background-color: main.$red;

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

	.delete-column-item-message {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
	}
}

@include main.inside-modal {
	.delete-column-item {
		width: calc(100% - 16px);
		margin: main.$in-modal-border-width;

		box-shadow: main.in-modal-column-item-shadow(main.$red);
		transform: none;

		@include main.breakpoint-medium {
			width: 450px;
			max-width: 650px;

			font-size: 1rem;
		}
	}
}

@include main.dark-theme {
	.delete-column-item {
		color: main.$off-white;

		background-color: main.$light-asphalt;
		box-shadow: 0 0 0 4px main.$dark-red;

		.column-item-button {
			&.confirm {
				color: inherit;
				background-color: main.$dark-red;

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

			&.cancel {
				border-color: main.$asphalt;
			}
		}
	}

	@include main.inside-modal {
		.delete-column-item {
			box-shadow: main.in-modal-column-item-shadow(main.$dark-red);
		}
	}
}
