:root {
  --btn-font-size: calc(1em * 0.875);
  --btn-sm: calc(1em * 0.75);
  --btn-radius: 0px;
  --font-size: 14px;
  --line-height: 16px;
}

.btn {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  line-height: var(--line-height);
  border: none;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--btn-radius);
  font-size: var(--font-size);
  outline: none;
  transition: 0.2s;

  &:active {
    transition: none;
  }

  .icon {
    /* icon inherits color of button label */
    color: inherit;
    flex-shrink: 0;
  }
}

/* feedback */
.btn[disabled] {
  cursor: not-allowed;
  box-shadow: none;

  &:visited {
    color: var(--btn-disabled-label);
  }
}

.btn--full-width {
  display: flex;
  width: 100%;
  justify-content: center;
}