@use '../../scss/animations.scss';

.button-select {
	position: relative;
	cursor: pointer;

	.overlay-wrapper {
		transition: 0.1s ease-in;

		&:hover {
			transform: scale(1.1);
		}
	}

	.overlay {
		position: absolute;
		left: -11rem;
		font-weight: bold;
		color: white;
		backdrop-filter: blur(3px);
		width: 10rem;
		padding: 0.8rem 1rem;
		border-radius: 10px;
		border-top-right-radius: 0;
		z-index: 10;
		animation: fade-in 0.2s ease-in;

		&--PRIMARY {
			background-color: rgba(var(--primary-color-rgb), 0.5);
		}

		&--SECONDARY {
			background-color: rgba(var(--secondary-color-rgb), 0.5);
		}

		.option {
			position: relative;
			display: flex;
			padding: 0.7rem 0;
			transition: 0.3s;
			-webkit-backface-visibility: hidden;
			-webkit-transform: perspective(1000px);

			svg {
				margin-right: 0.7em;
				align-self: center;
			}

			&:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}

			&:hover {
				transform: scale(1.05);
			}
		}

		.divider {
			content: '';
			height: 1px;
			background-color: white;
			transform: scale(1);
			width: 100%;
		}
	}
}
