//
// Buttons
// --------------------------------------------------


// Base styles
//

.btn {
	font-family: Montserrat, arial, sans-serif;
	font-size: $btn-font-size-base; /*11px*/
	font-weight: 400;
	letter-spacing: 0.15rem; /*15*/
	text-transform: uppercase;
	@include media-breakpoint-down(sm) {
		font-size: 0.625; /*10px*/
	}
}


// Alternate buttons
// --------------------------------------------------

.btn-primary, .btn-color {
	@include button-variant($btn-color-color, $btn-color-bg, $btn-color-border);
	border-color: transparent;
	background-image: $green-gradient;
	@include shadow-6dp();
	margin: 30px 0;
	min-width: 140px;
	&:hover, &:active, &:focus {
		color: white;
		border-color: transparent;
		background-image: $green-gradient;
		// @include shadow-2dp();
	}
	&.no-shadow {
		box-shadow: none;
		&:hover, &:active, &:focus {
			box-shadow: none;
		}
	}
}

.btn-dark {
	@include button-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
	&:focus {
		box-shadow: none;
	}
}

.btn-gray {
	@include button-variant($btn-gray-color, $btn-gray-bg, $btn-gray-border);
}

.btn-white {
	@include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
	&:focus {
		box-shadow: none;
	}
}

.btn.btn-dropdown {
  background: transparent;
  [class*=icon-]:before {
    font-size: 0.625rem;
  }
}

.btn-wide {
	width: 60vw;
	max-width: 240px;
}

// Remove all backgrounds

.btn-outline-gray {
	@include button-outline-variant($btn-gray-bg);
  background-color: rgba(255,255,255,0.6);

	&:focus {
		box-shadow: none;
	}

	&.btn-no-hover {

		&:hover {
			color: $btn-gray-bg;
			background-color: transparent;
		}
	}

	&.btn-translucent {

		&:not(:hover) {
			// background-color: rgba($btn-gray-bg, 0.25);
		}
	}

	&.btn-transparent {

		&:not(:hover) {
			background-color: transparent;
		}
	}
}

.btn-outline-gray.overlap.overlap-dark,
.btn-outline-white, {
	@include button-outline-variant($btn-white-bg, $btn-white-color);

	&:hover, &:active, &:focus {
		color: $black;
	}

	&:focus {
		color: white;
		background-color: transparent;
		box-shadow: none;
	}

	&.btn-no-hover {

		&:hover {
			color: $btn-white-bg;
			background-color: transparent;
		}
	}

	&.btn-translucent {

		&:not(:hover) {
			// background-color: rgba($btn-white-bg, 0.25);
		}
	}
}


// Button Styles
// --------------------------------------------------

.btn-round {
	padding: 0;
	white-space: normal;
	border-radius: 50%;

	// &:not(.btn-sm),
	// &:not(.btn-lg) {
		width: 0.25rem + ($btn-padding-y * 2) + ($btn-line-height * $btn-font-size-base);
		height: 0.25rem + ($btn-padding-y * 2) + ($btn-line-height * $btn-font-size-base);
		line-height: ($btn-padding-y * 2) + ($btn-line-height * $btn-font-size-base);
	// }

	&.btn-sm {
		width: 0.25rem + ($btn-padding-y-sm * 2) + ($btn-line-height-sm * $font-size-sm);
		height: 0.25rem + ($btn-padding-y-sm * 2) + ($btn-line-height-sm * $font-size-sm);
		line-height: ($btn-padding-y-sm * 2) + ($btn-line-height-sm * $font-size-sm);
	}

	&.btn-lg {
		width: 0.25rem + ($btn-padding-y-lg * 2) + ($btn-line-height-lg * $font-size-lg);
		height: 0.25rem + ($btn-padding-y-lg * 2) + ($btn-line-height-lg * $font-size-lg);
		line-height: ($btn-padding-y-lg * 2) + ($btn-line-height-lg * $font-size-lg);
	}
}

.btn-toggle {

  span {
    display: inline-block;
    width: 0;
    transition: width 0.3s;
    overflow: hidden;
    vertical-align: middle;
  }

	&:hover,
  &:focus,
  &:active {

		span {
			width: 40px;
		}
	}
}

.btn-close {
	position: absolute;
	top: $grid-gutter-width-base;
	right: $grid-gutter-width-base;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	opacity: 1;

	.sup-navigation & {
		&.control-close {
			top: 0;
			right: 0;
		}
	}

	&:hover {

		&:before {
			transform: rotate(180deg);
		}
	}

	&:before {
		font-size: 0.5rem;
		width: 0.5rem;
		height: 0.5rem;
		transition: all .2s ease-in-out;
	}
}

.btn-opacity {

	opacity: 0.5;

	&:hover,
	&:active,
	&:focus,
	&.active {
		opacity: 1;
	}
}


//
// Button Sizes
//

.btn-sm {
	line-height: $btn-line-height-sm;
}

.btn-md {
	line-height: $btn-line-height;
}

.btn-lg {
	line-height: $btn-line-height-lg;
}


//
// Button Placeholders
//

@include placeholder('btn') {
	display: inline-block;
	font-weight: $btn-font-weight;
	line-height: $btn-line-height;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: $input-btn-border-width solid transparent;
	@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
	@include transition($btn-transition);

	font-family: Montserrat, arial, sans-serif;
	font-size: $btn-font-size-base; /*11px*/
	font-weight: 700;
	letter-spacing: 0.15rem; /*15*/
	text-transform: uppercase;

	// Share hover and focus styles
	@include hover-focus {
		text-decoration: none;
	}
	&:focus,
	&.focus {
		outline: 0;
		// box-shadow: $btn-focus-box-shadow;
	}

	// Disabled comes first so active can properly restyle
	&.disabled,
	&:disabled {
		cursor: $cursor-disabled;
		opacity: .65;
		@include box-shadow(none);
	}
 
	&:active,
	&.active {
		background-image: none;
		// @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
	}
}

@include placeholder('btn-outline-white') {
	@include button-outline-variant($btn-white-bg, $btn-white-color);

	&.btn-no-hover {

		&:hover {
			color: $btn-white-bg;
			background-color: transparent;
		}
	}

	&.btn-translucent {

		&:not(:hover) {
			background-color: rgba($btn-white-bg, 0.25);
		}
	}
} 

/**
 * addthis fix
 */
.addthis_button_expanded > .at-icon-wrapper {
  display: none !important;
}
.addthis_default_style .addthis_separator,
.addthis_default_style .at4-icon,
.addthis_default_style .at300b,
.addthis_default_style .at300bo,
.addthis_default_style .at300bs,
.addthis_default_style .at300m  {
  float: none !important;
}  

button[type="button"] {
  cursor: pointer;
}
