.modal {
	&-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.25);
		opacity: 0;

		transition: opacity 0.2s, transform 0.2s;

		&:global(.ReactModal__Overlay--after-open) {
			opacity: 1;

			& .modal-content {
				transform: translate3d(-50%, -50%, 0);
			}
		}
		&:global(.ReactModal__Overlay--before-close) {
			opacity: 0;

			& .modal-content {
				transform: translate3d(-50%, 50%, 0);
			}
		}
	}

	&-content {
		position: absolute;
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		overflow: hidden;
		// max-width: var(--layout-max-width);
		background: var(--color-background);
		border-radius: 0.5rem;
		transform: translate3d(-50%, 50%, 0);
		transition: opacity 0.2s, transform 0.2s;
	}

	&-btn-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		display: flex;
		width: 2rem;
		height: 2rem;
		align-items: center;
		justify-content: center;
		border: none;
		background: var(--color-foreground);
		border-radius: 100%;
		color: var(--color-font-secondary);
		cursor: pointer;
		font-family: var(--sans-serif-font);
		font-size: 1.5rem;
		line-height: 2rem;

		&:hover {
			color: var(--color-font-primary);
		}
	}
}
