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

.thought-item-with-add-action {
	.thought-item {
		margin-bottom: 30px;
	}

	&.creating-action {
		.thought-item {
			box-shadow: 0 19px 38px rgba(main.$black, 0.3) !important;
			transform: scale(0.85);

			pointer-events: none;
		}
	}

	&.creating-action + .modal-close-button {
		margin: 1.2rem 3.5rem !important;
		transform: scale(0.85);
	}

	.add-action-item-button {
		display: block;
		height: 35px;
		margin: 2rem auto 0;
		padding: 8px 16px;

		font-weight: bolder;
		font-size: 0.75rem;

		background-color: main.$off-white;
		border-radius: 24px;
		box-shadow: 0 12px 24px rgba(main.$black, 0.15);

		.plus-icon {
			margin-right: 8px;
		}

		@media only screen and (max-width: 610px) {
			display: none;
		}

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

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

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

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

	.add-action-item {
		.text-container {
			pointer-events: initial !important;
		}
	}
}

@include main.dark-theme {
	.thought-item-with-add-action {
		.add-action-item-button {
			color: main.$off-white;
			background-color: main.$light-asphalt;

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

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

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