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

.create-column-item-input {
	display: block;
	width: 100%;
	height: 50px;

	font-weight: bold;
	font-size: 0.9rem;

	position: relative;

	@media only screen and (max-width: 610px) {
		.floating-character-countdown {
			bottom: -18px;
		}
	}

	.input-field {
		display: block;
		width: inherit;

		height: inherit;
		margin: inherit;
		padding: 0 12px;

		color: inherit;
		font-family: inherit;
		font-weight: inherit;
		font-size: inherit;
		text-transform: initial;

		border: 4px solid main.$black;
		border-radius: 6px;
		outline: 0;
		box-shadow: 0 2px 15px rgba(main.$black, 0.15);

		&::placeholder {
			color: rgba(main.$asphalt, 0.4);
		}

		&.happy {
			border-color: main.$green;
		}

		&.confused {
			border-color: main.$blue;
		}

		&.unhappy {
			border-color: main.$red;
		}

		&.action {
			border-color: main.$yellow;
		}
	}
}

@include main.dark-theme {
	.create-column-item-input {
		.input-field {
			color: main.$off-white;
			background-color: main.$asphalt;

			&::placeholder {
				color: rgba(main.$off-white, 0.4);
			}

			&.happy {
				border-color: main.$dark-green;
			}

			&.confused {
				border-color: main.$dark-blue;
			}

			&.unhappy {
				border-color: main.$dark-red;
			}

			&.action {
				border-color: main.$dark-yellow;
			}
		}
	}
}
