.popup-modal.actions-modal {
	background: transparent;
}

.action-group {
	margin: 0.44444rem;
}

.action-button,
.action-label {
	margin: 0;
	width: 100%;
	text-align: center;
	font-weight: normal;
	background: rgba(243, 243, 243, 0.95);
	box-sizing: border-box;
	display: block;
	position: relative;

	a {
		text-decoration: none;
		color: inherit;
	}

	b {
		font-weight: 500;
	}

	&.color-gray {
		color: var(--color-gray);
	}

	&.color-danger {
		color: var(--color-danger);
	}

	&.bg-danger {
		background: var(--color-danger);
		color: white;

		&:active {
			background: var(--color-danger-tint);
		}
	}

	&:first-child {
		border-radius: 0.44444rem 0.44444rem 0 0;
	}

	&:last-child {
		@include hairline-remove(bottom);
		border-radius: 0 0 0.44444rem 0.44444rem;
	}

	&:first-child:last-child {
		border-radius: 0.44444rem;
	}

	&.disabled {
		opacity: 0.95;
		color: var(--color-gray);
	}
}

.action-button {
	cursor: pointer;
	line-height: 3.5rem;
	font-size: 1rem;
	color: var(--color-primary);

	&:active,
	&.active-state {
		background: #DCDCDC;
	}
}

.action-label {
	font-size: 0.78rem;
	line-height: 1.3;
	min-height: 2.5rem;
	padding: 0.44444rem 0.56rem;
	justify-content: center;
	align-items: center;
	color: var(--color-accent);

	@include flexbox();
}

.slide-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
}

.side {
	width: 13rem;
	height: 100%;
	z-index: 10000;
	position: absolute;
	transition: transform .3s;
	transform: translate3d(0, 0, 0);

	&.side-enter,
	&.side-leave-active {
		transform: translate3d(-100%, 0, 0);
	}

	.panel {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		background-color: white;
		transition: transform .3s;

		.app.dark & {
			background-color: #111;
			@include hairline('right', rgba(255,255,255, 0.2));
		}
	}
}


.touching .panel {
	transition: none;
}

.notices {
	position: fixed;
	display: flex;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem;
	overflow: hidden;
	z-index: 1052;
	pointer-events: none;

	.toast {
		display: inline-flex;
		align-items: center;
		animation-duration: 150ms;
		margin: 0.5rem;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		border-radius: 0.25em;
		pointer-events: auto;
		opacity: 0.96;
		color: #fff;
		min-height: 3em;
		width: calc(100% - 1rem);
		max-width: 480px;
		cursor: pointer;
		align-self: center;

		&.is-top{
			margin-bottom: 0px;
		}

		&.is-bottom {
			margin-top: 0px;
		}

		.toast-text {
			margin: 0;
			padding: 0.5em 1em;
		}
	}

	@each $color, $value in $colors {
		.toast-#{$color} {
			background-color: $value;
		}
	}

	.toast-default {
		background-color: #343a40;
	}

	&.is-top {
		flex-direction: column;
	}

	&.is-bottom {
		flex-direction: column-reverse;
	}

	&.is-custom-parent {
		position: absolute;
	}

	@media screen and (max-width: 768px) {
		padding: 0;
		position: fixed !important;
	}
}