/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.all-about-modal {
	display: block;

	&__tp-modal {
		padding: 0;
	}

	&__tp-modal-content {
		max-width: none;
		min-width: none;
		min-height: none;
		overflow-y: auto;
		background-color: transparent;
	}

	&__tp-modal tp-modal-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 100;

		button {
			width: 36px;
			height: 36px;
			background-color: rgba(255, 255, 255, 0.5);
			border: none;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: background-color 0.2s ease, transform 0.2s ease;
			padding: 0;

			svg {
				width: 20px;
				height: 20px;
				stroke: #000;
			}

			&:hover,
			&:focus {
				background-color: rgba(255, 255, 255, 0.8);
				transform: scale(1.05);
				outline: none;
			}
		}
	}
}