.actions {
	margin-top: rem-calc(60);
	padding-top: rem-calc(40);
	border-top: 6px solid #000;


	.coupon {
		width: 55%;
		position: relative;
		float: left;

		@include breakpoint(medium down) {
			width: 100%;
			float: none;
		}

		label {
			display: none;
		}

		.button {
			position: absolute;
			top: 0;
			right: 0px;
			padding: 0;
			margin: 0;
			background: none !important;
			min-width: 0;
			width: 50px;
			font-size: 0 !important;
			height: 100%;
			z-index: 999;	
			border: none;

			&:before {
				display: none;
			}

			&:active,
			&:focus {
				outline: none;
				border: none;
			}					
		}

		#coupon_code {
		    padding: 17px 60px 16px 0;
		    min-width: 200px;
		    width: 100%;
		    height: 60px;
		    font-size: 16px;
		    display: block;
		    margin-right: 0px;
		    border-width: 1px;
		    border-style: dashed; 
		    padding-left: 60px; 
		    color: #000;
		    border-color: rgba(0,0,0,0.2);
		    transition: border-color .6s;

		    &:focus {
				border-color: rgba(0,0,0,1);
		    }
		}	

		&:before {
	    	position: absolute;
		    left: 14px;
		    top: 20px;
		    font-size: 24px;
		    font-weight: normal;
		    color: #000; 			
			@include barberry_icon('\ea1e');
		}

		&:after {
			content: '';
			opacity: 0;
			transition: opacity .6s;
		}

		&.focus {
			&:after {
				opacity: 1;
		    	position: absolute;
			    right: 16px;
			    top: 18px;
			    font-size: 24px;
			    font-weight: normal;
			    color: #000; 			
				@include barberry_icon('\ea25');				
			}
		}			
	}

	button.button {
		margin-bottom: 0;
		float: right;
		border-width: 1px;
		background-color: #fff;
		color: #000;
		border-color: rgba(0, 0, 0, 0.1);
		&:before {
			display: none;
		}
		&:hover {
			color: rgba(0, 0, 0, 0.4);
		}
		@include breakpoint(500px down) {
			width: 100%;
			float: none;
		}		

		&.button.disabled, &.button[disabled] {
			&:before {
				display: none;
			}
			&:hover {
				color: inherit;
			}
		}

	}


}