// -------------------------------------------------------------------
// :: NOTES
// -------------------------------------------------------------------

.m-note {

	position: relative;

	a {
		color: $dark;
		text-decoration: none;
		float: right;
		display: inline-block;

		&:hover {
			color: $dark-extra;
		}
	}

	margin-bottom: rem(5px);


	.m-note__header {
		padding: rem(10px) rem(24px);
		background: $white;
		margin-bottom: rem(2px);
		color: $dark;
		border-radius: rem(4px) rem(4px) 0 0;
	}

	.m-note__body {
		padding: rem(15px) rem(24px);
		background: $white;
		border-radius: 0 0 rem(4px) rem(4px);
	}

	.m-note__save {
		display: none;
	}

	&--edit {
		.m-note__save {
			display: inline-block;
		}

		.m-note__edit,
		.m-note__delete {
			display: none;
		}
	}

	.m-note__confirm_delete {

		div {
			margin: 0 auto;
		}

		&.collapse {
			display: none;
		}

		position: absolute;
		top: 5px;
		left: 5px;
		right: 5px;
		bottom: 5px;
		border-radius: 5px;
		background-color: rgba($light, 0.9);
		z-index: ($z-index-base);
		text-align: center;
		padding: $grid-gutter-width 0;

		.m-note__cancel_delete,
		span {
			vertical-align: middle;
			display: block;
			float: none;
		}

		.a-button {
			vertical-align: middle;
			color: $white;
			z-index: $z-index-base;
			float: none;
		}

		.m-note__cancel_delete {
			color: $aqua;
		}
	}

}

.m-notes__add {

	position: relative;
	display: block;
	text-decoration: none;
	text-align: center;
	color: $dark;
	background: $white;
	font-size: rem(20px);
	padding: rem(24px) 0;
	border-radius: rem(4px);

	&:hover {
		background-color: lighten($dark, 30%);
		color: darken($dark, 10%);
	}

	&:active {
		top: 1px;
	}

}

.o-main__sidebar .m-notes {

	background: transparent;

	@include FLOW-at($desktop) {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow-y: auto;
	}
}

.m-notes {
	background: $light;

	padding: rem($grid-gutter-width);

	.m-notes__close {
		position: absolute;
		top: $grid-gutter-width;
		right: $grid-gutter-width;
		color: $dark-extra;
		text-decoration: none;

		span {
			display: none;
		}

		span[class*="icon"] {
			display: block;
		}
	}

	hr {
		margin: 5px 0;
	}

	small {
		display: block;
		margin-bottom: rem(26px);
	}
}