.button {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: calc(var(--vertical-rhythm) / 4 - 1px) calc(1rem - 1px);
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition-property: background-color, border-color, box-shadow, color, opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.button:hover {
  text-decoration: none;
}

.button:focus {
  outline: none;
}

.button:disabled {
  opacity: 0.5;
}

.button-large {
  padding: calc(var(--vertical-rhythm) / 2 - 1px) calc(1.25rem - 1px);
  font-size: calc(1rem * $type-scale-4);
}

.button-pill {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

.button-pill > .icon {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
}

.button-default {
  background-color: var(--default-color);
  color: var(--default-background-color);
}

.button-default:hover {
  background-color: var(--default-hover-color);
}

.button-default:active {
  background-color: var(--default-active-color);
}

.button-default:focus {
  box-shadow: 0 0 0 2px var(--default-outline-color);
}

.button-default:disabled {
  background-color: var(--default-color);
}

.button-positive {
  background-color: var(--positive-color);
  color: var(--x-light-color);
}

.button-positive:hover {
  background-color: var(--positive-hover-color);
}

.button-positive:active {
  background-color: var(--positive-active-color);
}

.button-positive:focus {
  box-shadow: 0 0 0 2px var(--positive-outline-color);
}

.button-positive:disabled {
  background-color: var(--positive-color);
}


.button-negative {
  background-color: var(--negative-color);
  color: var(--x-light-color);
}

.button-negative:hover {
  background-color: var(--negative-hover-color);
}

.button-negative:active {
  background-color: var(--negative-active-color);
}

.button-negative:focus {
  box-shadow: 0 0 0 2px var(--negative-outline-color);
}

.button-negative:disabled {
  background-color: var(--negative-color);
}

.button-outline-default {
  background-color: var(--default-background-color);
  border-color: var(--default-border-color);
  color: var(--default-color);
}

.button-outline-default:hover {
  background-color: var(--default-color);
  border-color: transparent;
  color: var(--default-background-color);
}

.button-outline-default:active {
  background-color: var(--default-active-color);
  border-color: transparent;
  color: var(--default-background-color);
}

.button-outline-default:focus {
  box-shadow: 0 0 0 2px var(--default-outline-color);
}

.button-outline-default:disabled {
  background-color: var(--default-background-color);
  border-color: var(--default-border-color);
  color: var(--default-color);
}

.button-outline-positive {
  color: var(--positive-color);
  background-color: var(--x-light-color);
  border-color: var(--positive-border-color);
}

.button-outline-positive:hover {
  background-color: var(--positive-color);
  border-color: transparent;
  color: var(--x-light-color);
}

.button-outline-positive:active {
  background-color: var(--positive-active-color);
  border-color: transparent;
  color: var(--x-light-color);
}

.button-outline-positive:focus {
  box-shadow: 0 0 0 2px var(--positive-outline-color);
}

.button-outline-positive:disabled {
  color: var(--positive-color);
  background-color: var(--x-light-color);
  border-color: var(--positive-border-color);
}

.button-outline-negative {
  color: var(--negative-color);
  background-color: var(--x-light-color);
  border-color: var(--negative-border-color);
}

.button-outline-negative:hover {
  background-color: var(--negative-color);
  border-color: transparent;
  color: var(--x-light-color);
}

.button-outline-negative:active {
  background-color: var(--negative-active-color);
  border-color: transparent;
  color: var(--x-light-color);
}

.button-outline-negative:focus {
  box-shadow: 0 0 0 2px var(--negative-outline-color);
}

.button-outline-negative:disabled {
  color: var(--negative-color);
  background-color: var(--x-light-color);
  border-color: var(--negative-border-color);
}

.button-block {
  display: block;
  width: 100%;
}

.button-toolbar > .button + .button,
.button-toolbar > .button + .button-group,
.button-toolbar > .button-group + .button,
.button-toolbar > .button-group + .button-group {
  margin-left: 0.5rem;
}

.button-group {
  display: inline-block;
}

.button-group > .button:not(:first-of-type) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.button-group > .button:not(:last-of-type) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.button-group > .button + .button {
  margin-left: -1px;
}

.button-group > .button:focus,
.button-group > .button:active,
.button-group > .button:hover {
  z-index: 10;
}

.close {
  padding: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  border: 0;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 L 7.21875 5.78125 z"></path></svg>') 50% 50% / 16px 16px no-repeat;
  transition: color 0.2s ease-in-out;
}

.close:hover {
  color: var(--positive-color);
}
