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

$opacity: 0.25;

.column-item-button-group {
	display: flex;
	justify-content: stretch;
	height: 40px;

	background-color: inherit;
	border-top: 2px solid rgba(main.$asphalt, 0.06);
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;

	> * {
		flex: 1 1 0;

		&:first-child {
			border-bottom-left-radius: inherit;
		}

		&:last-child {
			border-bottom-right-radius: inherit;
		}
	}

	.column-item-button {
		display: flex;
		flex: 25%;
		align-items: center;
		justify-content: center;

		color: inherit;
		text-align: center;

		background-color: transparent;
		border: 0;
		box-shadow: none;
		cursor: pointer;

		user-select: none;

		position: relative;

		&:not(:last-child) {
			border-right: 2px solid rgba(main.$asphalt, 0.06);
		}

		&:disabled,
		&.disabled {
			user-select: none;
			pointer-events: none;

			> * {
				opacity: $opacity;
			}
		}

		&.read-only {
			cursor: initial;
			pointer-events: unset;
		}

		&.confirm,
		&.cancel {
			font-size: 1rem;
			border: 0;
		}

		&.cancel {
			border-top: 1px solid main.$light-gray;

			&:hover,
			&:focus {
				background-color: rgba(main.$light-gray, 0.4);
			}
		}

		&.confirm {
			color: main.$white;
			background-color: main.$teal;

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

@include main.dark-theme {
	$dark-border: rgba(main.$black, 0.08);

	.column-item-button-group {
		border-top-color: $dark-border;

		.column-item-button {
			color: main.$off-white;

			background-color: inherit;
			border-color: $dark-border;

			&.cancel {
				color: inherit;

				&:hover,
				&:focus {
					background-color: rgba(main.$white, 0.1);
				}
			}

			&.confirm {
				color: main.$asphalt;
				background-color: main.$sea-foam;

				&:hover,
				&:focus {
					color: main.$white;
				}
			}
		}
	}
}
