// // Buttons and things that look like buttons // // stylelint-disable color-named

.btn {

display: inline-block;
box-sizing: border-box;
padding-top: 0.3em;
padding-right: 1em;
padding-bottom: 0.3em;
padding-left: 1em;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: $base-button-color;
border-width: 0;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;

&:focus {
  text-decoration: none;
  outline: none;
  box-shadow: 0 0 0 3px rgba(blue, 0.25);
}

&:focus:hover,
&.selected:focus {
  box-shadow: 0 0 0 3px rgba(blue, 0.25);
}

&:hover,
&.zeroclipboard-is-hover {
  color: darken($link-color, 2%);
}

&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
  text-decoration: none;
  background-color: darken($base-button-color, 1%);
}

&:active,
&.selected,
&.zeroclipboard-is-active {
  background-color: darken($base-button-color, 3%);
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

&.selected:hover {
  background-color: darken(#dcdcdc, 5%);
}

&:disabled,
&.disabled {
  &,
  &:hover {
    color: rgba(102, 102, 102, 0.5);
    cursor: default;
    background-color: rgba(229, 229, 229, 0.5);
    background-image: none;
    box-shadow: none;
  }
}

}

.btn-outline {

color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;

&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
  color: darken($link-color, 4%);
  text-decoration: none;
  background-color: transparent;
  box-shadow: inset 0 0 0 3px $grey-lt-300;
}

&:focus {
  text-decoration: none;
  outline: none;
  box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
}

&:focus:hover,
&.selected:focus {
  box-shadow: inset 0 0 0 2px $grey-dk-100;
}

}

.btn-primary {

@include btn-color($white, $btn-primary-color);

}

.btn-purple {

@include btn-color($white, $purple-100);

}

.btn-blue {

@include btn-color($white, $blue-000);

}

.btn-green {

@include btn-color($white, $green-100);

}