.btn {
  display: inline-block;
  box-sizing: border-box;
}

button, .btn, input, select, textarea {
  font-family: var(--font-family-alternate);
  text-decoration: none;
  line-height: inherit;
  padding: .25em .5em;
  border-radius: 2px;
}

input, select, textarea {
  border: 1px solid var(--color-input-bord);
  background: var(--color-input-back);
  color: var(--color-input-text);
}

button, .btn {
  text-align: center;
  transition-property: background, color, box-shadow, border-color;
  transition-duration: .3s;
  border: 1px solid var(--color-border);
  background: linear-gradient(to bottom, var(--color-back-bright), var(--color-back-dim));
  color: var(--color-text);
  box-shadow: inset 0 1px hsla(var(--hsl-highlight), .67),
              0 1px hsla(var(--hsl-highlight), .67),
              inset 1px 0 hsla(var(--hsl-highlight), .33),
              inset -1px 0 hsla(var(--hsl-highlight), .33),
              0 -1px 1px hsla(var(--hsl-backlight), .05);
  text-shadow: 0 1px var(--color-back-bright);
}

button:hover,
button:focus,
.btn:hover,
.btn:focus,
.btn-focus {
  border-color: var(--color-border-medium);
  background: var(--color-back-bright);
  background: linear-gradient(to bottom, var(--color-back-bright), var(--color-back));
  box-shadow: inset 0 1px hsla(var(--hsl-highlight), .67),
              0 0 3px 0px var(--color-hilite);
}

button:active,
.btn:active,
.btn-active {
  text-shadow: 0 1px hsl(var(--hsl-highlight));
  color: var(--color-text);
  box-shadow: inset 0 4px 4px -4px hsla(var(--hsl-backlight), .2),
              inset 4px 0 4px -4px hsla(var(--hsl-backlight), .1),
              inset -4px 0 4px -4px hsla(var(--hsl-backlight), .1);
  border: 1px solid var(--color-border-light);
}

button[disabled], .btn-disabled, [disabled] > .btn {
  border-color: var(--color-input-bord);
  background: var(--color-back-dim);
  box-shadow: inset 0 1px hsla(var(--hsl-highlight), .67),
              0 1px hsla(var(--hsl-highlight), .67),
              inset 1px 0 hsla(var(--hsl-highlight), .33),
              inset -1px 0 hsla(var(--hsl-highlight), .33),
              0 -1px 1px hsla(var(--hsl-backlight), .05);
  text-shadow: 0 1px var(--color-back-bright);
  color: var(--color-input-text);
  cursor: default;
  opacity: .67;
}
