/*  3.1 Buttons
-------------------------------------------------------------------*/
.@{p}btn {
	padding: 8px 13px;
	border: none;
	background: none;

	color: @color-white;
	text-decoration: none;
	cursor: pointer;
	.transition-main();

	&:focus {
		color: @color-white;
		outline: none !important;
	}

	&:hover {
		color: @color-white;
	}
} //.btn


/*  Big panel buttons | Options
----------------------------------*/
.@{p}btn--panel-big {
	padding: 9px 14px;
	background-color: @color-main-dark-2;

	&:focus {
		box-shadow: 0 0 0 1px @color-main-green,0 0 1px 1px rgba(174, 207, 102, 0.8);
	}

	&:hover {
		background-color: @color-main-cyan;
	}
} //.btn--panel-big

.@{p}btn--green {
	background-color: @color-main-green;

}


/*  Panel button-sign | Metabox
----------------------------------*/
.@{p}btn--panel-sign {
	position: absolute;
	height: 100%;
	padding: 0 10px;

	color: @color-main-cyan;

	&:hover, &:focus {
		background: @color-main-dark;
		color: @color-light-red;
	}

	&:disabled, &[disabled] {
		display: none;
	}



} //.icon-angle-up



/*  Buttons  | SPECIFIC
-------------------------------------------------------------------*/


/*  Panel button-sign 2 | Metabox
----------------------------------*/
.@{p}btn--panel-sign--2 {
	position: absolute;
	top: 0;
	right: 0;
	height: 35px;
	width: 35px;
	padding: 0;

	background-color: @color-main-dark;

	i {
		position: relative;
		top: -1px;
	}

} //.icon-angle-up

.@{p}panel--options .@{p}btn--panel-sign--2 {
	background-color: @color-main-dark-2;
	color: @color-main-green-2;

	&:hover, &:focus {
		background: @color-main-dark;
		color: @color-light-red;
	}
}

/*  Close button | Shortcodes Modal
----------------------------------*/
.@{p}btn--close-sc-modal {
	height: 3.2em;
	width: 3.2em;
	i:before {
		font-size: 1.2em;
	}
}


/*  Metabox button with ans icon | Metabox
----------------------------------*/
.@{p}btn--metabox-icon {
	background-color: @color-main-dark-2;
	.transition-main(background-color);

	i {
		color: @color-main-green-2;
		&:before {
			margin-left: 10px;
			margin-right: 0;
		}
	}

	&:hover {
		background-color: @color-main-dark;

		i {
			color: @color-main-cyan;
		}
	} // hover

} //.btn--metabox-icon