@import '../less/variables/effects.less';
@import '../less/variables/z-index.less';

@alert-border-radius: 4px;
@feedback-breakpoint: 620px;
@feedback-width-flexible: 80%;
@feedback-width-fixed: 600px;

.c-feedback_container {
	height: auto;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: @z-index-feedback;
}

.c-feedback {
	margin-left: auto;
	margin-right: auto;
	pointer-events: none;
	text-align: left;
	width: @feedback-width-flexible;

	@media (min-width: @feedback-breakpoint) {
		width: @feedback-width-fixed;
	}
}

.c-feedback__contents {
	box-shadow: @notification-box-shadow;
	margin: 0 auto;
	max-width: @feedback-width-fixed;
	pointer-events: auto;
	top: 80px;

	// The padding comes from the o-alert class, but we need to override
	// the side padding so that text doesn't wrap underneath the button.
	&.o-alert {
		padding-left: 55px;
		padding-right: 55px;
		position: absolute;
		width: @feedback-width-flexible;

		@media (min-width: @feedback-breakpoint) {
			width: @feedback-width-fixed;
		}
	}

	// Animations:
	// In
	&.ng-leave,
	&.ng-enter.ng-enter-active {
		opacity: 1;
		transform: scale(1);
	}

	// Out
	&.ng-enter,
	&.ng-leave.ng-leave-active {
		opacity: 0;
		transform: scale(0.75);
	}

	// Timing
	&.ng-enter,
	&.ng-leave {
		// http://cubic-bezier.com/#.7,.8,.2,1.5
		transition: all 0.3s cubic-bezier(0.7, 0.8, 0.2, 1.5);
	}
}

.c-feedback__message,
.c-feedback__copy-link-break,
.c-feedback__copy-link {
	font-size: @font-size-base;
}

.c-feedback__icon {
	align-items: center;
	display: flex;
	font-size: 22px;
	height: 100%;
	left: 0;
	padding-left: 20px;
	position: absolute;
	top: 0;
}

// Close button
.c-feedback__close {
	border: none;
	border-bottom-right-radius: @alert-border-radius;
	border-top-right-radius: @alert-border-radius;
	font-size: 14px;
	height: 100%;
	margin: 0;
	padding: 0 16px;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-color 0.3s;
}

// Close button colors
.c-feedback--success__close {
	background-color: tint(@color-ui-theme-success-light, 85%);
	color: @color-ui-theme-text-primary;

	&:hover {
		background-color: tint(@color-ui-theme-success-light, 85%);
	}
}

.c-feedback--danger__close {
	background-color: tint(@color-ui-theme-error-light, 85%);
	color: @color-ui-theme-text-primary;

	&:hover {
		background-color: tint(@color-ui-theme-error-light, 85%);
	}
}

.c-feedback--warning__close {
	background-color: tint(@color-ui-theme-warning-light, 65%);
	color: @color-ui-theme-text-primary;

	&:hover {
		background-color: tint(@color-ui-theme-warning-light, 65%);
	}
}

.c-feedback--info__close {
	background-color: tint(@color-ui-theme-info-light, 85%);
	color: @color-ui-theme-text-primary;

	&:hover {
		background-color: tint(@color-ui-theme-info-light, 85%);
	}
}