/* Button */
.btn
{
	display: inline-block;
	min-height: 1.875em;
	margin: 0;
	padding: 0 10px;
	position: relative;
	line-height: 1.875em;
	text-decoration: none;
	color: var(--black);
	background-color: transparent;
	border: none;
	border-radius: 2px;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all .4s cubic-bezier(.25 , .8 , .25 , 1);
	transition: all .4s cubic-bezier(.25 , .8 , .25 , 1);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

[dir="rtl"] .btn { float: right; }
[dir="ltr"] .btn { float: left; }

/* Light Color */
.btn-light , .btn-primary , .btn-green , .btn-red , .btn-blue { color: var(--white); }

/* Primary , Green */
.btn-primary , .btn-green { background-color: var(--green); }

/* Red */
.btn-red { background-color: var(--red); }

/* Blue */
.btn-blue { background-color: var(--blue); }

/* Disabled */
.btn:not([disabled])
{
	box-shadow: none;
	cursor: pointer;
}

.btn:not([disabled]):not(.btn-primary):not(.btn-green):not(.btn-red):not(.btn-blue):hover ,
.btn:not([disabled]):not(.btn-primary):not(.btn-green):not(.btn-red):not(.btn-blue):focus { background-color: var(--transparent-black-05); }

.btn[disabled]
{
	color: var(--disabled);
	pointer-events: none;
}

.btn-primary[disabled] , .btn-green[disabled] , .btn-red[disabled] , .btn-blue[disabled] { background-color: var(--disabled-background); }

/* Raised */
.btn:not([disabled]).btn-raised { box-shadow: 0 1px 5px 0 var(--transparent-black-2) , 0 2px 2px 0 var(--transparent-black-15), 0 3px 1px -2px var(--transparent-black-1); }
.btn:not([disabled]).btn-raised:active { box-shadow: 0 2px 4px -1px var(--transparent-black-2) , 0 4px 5px 0 var(--transparent-black-15) , 0 1px 10px 0 var(--transparent-black-1); }

/* Stroke */
.btn:not(.btn-raised).btn-stroke
{
	min-height: 1.75em;
	line-height: 1.75em;
	border: 1px solid var(--light-grey);
}

.btn:not([disabled]):not(.btn-raised).btn-stroke.btn-primary , .btn:not([disabled]):not(.btn-raised).btn-stroke.btn-green { border-color: var(--dark-green); }
.btn:not([disabled]):not(.btn-raised).btn-stroke.btn-red { border-color: var(--dark-red); }
.btn:not([disabled]):not(.btn-raised).btn-stroke.btn-blue { border-color: var(--dark-blue); }

/* Button Group */
[dir="rtl"] .button-group .btn:not(.gx-a) { margin-left: 10px; }
[dir="ltr"] .button-group .btn:not(.gx-a) { margin-right: 10px; }

/* Icon */
.btn span { line-height: 1.875em; }

[dir="rtl"] .btn span
{
	float: right;
	margin-left: 5px;
}

[dir="ltr"] .btn span
{
	float: left;
	margin-right: 5px;
}