.vrts-alert-actions {
	display: block;
	position: relative;

	&__trigger {
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
		line-height: 1;
		padding: 0.5rem;
		width: 42px;
		height: 42px;

		&::before {
			position: absolute;
			top: 5px;
			left: 5px;
			right: 5px;
			bottom: 5px;
			content: "";
			background: #f6f7f7;
			border-radius: 2px;
			opacity: 0;
			z-index: -1;
			transition: opacity 0.2s;
		}

		&:hover,
		&:focus-visible,
		&[aria-expanded="true"] {

			&::before {
				opacity: 1;
			}
		}
	}

	&__dropdown {
		position: absolute;
		top: calc(100% - 5px);
		right: 0;
		background: #fff;
		border: 1px solid #c3c4c7;
		box-shadow: 0 3px 28px 0 rgba(0, 0, 0, 0.15);
		opacity: 0;
		visibility: hidden;
		min-width: 200px;
		transform: translateY(-4px);
		will-change: transform, opacity, visibility;
		transition: all 0.15s;

		&[aria-hidden="false"] {
			opacity: 1;
			visibility: visible;
			transform: none;
		}
	}

	&__dropdown-action {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 0.375rem;
		background: transparent;
		border: 0;
		white-space: nowrap;
		padding: 12px 15px;
		width: 100%;
		text-decoration: none;
		color: inherit;
		transition: color 0.2s;

		&:hover,
		&:focus-visible {
			color: var(--vrts-admin-theme-color);
		}

		&:not(:last-child) {
			border-bottom: 1px solid #ccc;
		}
	}

	&__modal {

		.vrts-modal__content {
			max-width: 450px;
		}

		.vrts-modal__content-inner {
			padding-top: 15px;
		}

		&-action {
			margin-top: 10px;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
		}

		&-action-success {
			color: #00a32a;
			font-size: 0.75rem;
			margin-left: 0.5rem;
			display: none;

			&.is-active {
				display: block;
			}
		}

		.spinner {
			margin: 0;
			display: none;

			&.is-active {
				display: block;
			}
		}

		textarea {
			border-color: #ccc;
		}

		.description {
			color: #757575;
		}
	}
}