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

.action-item.add-action-item {
	margin-top: 0.8rem;

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

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

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

@include main.dark-theme {
	.action-item.add-action-item {
		.column-item-button {
			&.confirm {
				background-color: main.$dark-yellow;

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

.shake {
	backface-visibility: hidden;
	perspective: 1000px;

	animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@media screen and (prefers-reduced-motion: reduce) {
	.shake {
		animation: none;
	}
}

$shake-shadow: 0 0 0 8px main.$red, main.$base-drop-shadow;

@keyframes shake {
	10%,
	90% {
		box-shadow: $shake-shadow;
		transform: translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		box-shadow: $shake-shadow;
		transform: translate3d(3px, 0, 0);
	}

	30%,
	50%,
	70% {
		box-shadow: $shake-shadow;
		transform: translate3d(-6px, 0, 0);
	}

	40%,
	60% {
		box-shadow: $shake-shadow;
		transform: translate3d(6px, 0, 0);
	}
}
