/* scss/Atoms/_Buttons.scss */


/* Default  button Styles */

button,
link,
.ids-button,
.ids-link {
	@include appearance(none);
	font-family: $primary-font-stack;
	color: $primary-text-color;
	border: 1px solid $tertiary-color-1;
	@include borderRadius(4px);
	cursor: pointer;
	font-size: .8em;
	text-decoration: none;
	padding: 0.5em 4em;
	transition: 0.25s all ease-in-out;
	outline: none;


	&:hover, &[hover] {
		border-color: $link-active-color;
		transition: 0.25s all ease-in-out;
		color: $link-active-color;
	}

	&[disabled] {
		opacity: 0.5;
		cursor: initial;

			&:hover {
				border-color: $tertiary-color-1;
				transition: 0.25s all ease-in-out;
				color: $primary-text-color;
			}
	}

	&:active, &[active] {
		background: $link-active-color;
		border-color: $link-active-color;
		color: #fff;
		outline: none;

	}

}

/* Filled button Styles */

.ids-button-filled,
.ids-link-filled {
		  height: 40px;
		  width: 100%;
		  @include borderRadius(4px);
		  color: #ffffff;
		  text-transform: uppercase;
		  font-size: 12px;
		  letter-spacing: 1.07px;
		  line-height: 17px;
		  margin: 0 0 16px 0;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  text-decoration: none;
		  transition: all 0.5s ease-in-out;
		  font-family: $primary-font-stack;
		  font-weight: 700;

		  &--primary {
		  	background: $primary-color;

		  		&:hover {
					background: lighten($primary-color, 5%);
		  		}
		  }

			&--secondary {
				background-color: $secondary-color;

				&:hover {
					background: lighten($secondary-color, 5%);
		  		}
			}

			&--tertiary {
				background-color: $tertiary-color;

				&:hover {
					background: lighten($tertiary-color, 5%);
		  		}
			}

			&--tertiary-1 {
				background-color: $tertiary-color-1;

				&:hover {
					background: lighten($tertiary-color-1, 5%);
		  		}
			}

			&--tertiary-2{
				background-color: $tertiary-color-2;

				&:hover {
					background: lighten($tertiary-color-2, 5%);
		  		}
			}

			&--tertiary-3 {
				background-color: $tertiary-color-3;

				&:hover {
					background: lighten($tertiary-color-3, 5%);
		  		}
			}

			/* Gradients */

			&--primary-gradient {
				@include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%);
			}


	  &:hover {
	    filter: opacity(95%);
	    text-decoration: none;
	    cursor: pointer;
	    transition: all 0.5s ease-in-out;
	  }

}


/* Outline/Stroke Button Styles  */

.ids-button-stroke,
.ids-link-stroke {
		  height: 40px;
		  width: 100%;
		  @include borderRadius(4px);
		  text-transform: uppercase;
		  font-size: 12px;
		  letter-spacing: 1.07px;
		  line-height: 16px;
		  margin: 0 0 16px 0;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  text-decoration: none;
		  transition: all 0.5s ease-in-out;
		  border-width: 1px;
		  border-style: solid;
		  border-color: $tertiary-color-1;
		  background: rgba(255,255,255,0);
		  font-weight: 700;

		  &--primary {
		  	color: $primary-color;
		  	border-color: $primary-color;

		  		&:hover {
					background: rgba($primary-color, 1);
					color: #fff;
		  		}
		  }

			&--secondary {
				color: $secondary-color;
			  	border-color: $secondary-color;

		  		&:hover {
					background: rgba($secondary-color, 1);
					color: #fff;
		  		}
			}

			&--tertiary {
				color: $tertiary-color;
			  	border-color: $tertiary-color;

		  		&:hover {
					background: rgba($tertiary-color, 1);
					color: #fff;
		  		}
			}

			&--tertiary-1 {
				background-color: $tertiary-color-1;

				&:hover {
					background: lighten($tertiary-color-1, 5%);
		  		}
			}

			&--tertiary-2{
				background-color: $tertiary-color-2;

				&:hover {
					background: lighten($tertiary-color-2, 5%);
		  		}
			}

			&--tertiary-3 {
				background-color: $tertiary-color-3;

				&:hover {
					background: lighten($tertiary-color-3, 5%);
		  		}
			}

			/* Gradients */

			&--primary-gradient {
				@include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%);

			}
}