button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

button {
  padding: 6px 10px;
  border: 0;
  background-color: @bg-color-9;
  //font-weight: bold;
  color: @font-color;
  white-space: nowrap;
  border-radius: 1px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  &.icon-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;
    svg {
      width: 16px;
      height: 16px;
      margin: -4px 4px -4px -2px;
    }
  }
  &.compact {
    padding: 1px 3px;
  }
}

button.neutral {
  .button-behavior(@color-neutral)
}

button.accent {
  .button-behavior(@color-accent)
}

button.highlight {
  .button-behavior(@color-highlight)
}

button.danger {
  .button-behavior(@color-danger)
}

button.minor {
  .button-behavior(@color-neutral)
}

//--------------

input, textarea {
  outline: none;
  background: @control-bg;
  border: @control-bg 1px solid;
  padding: 2px;
  color: @control-color-text;
  &::selection {
    color: white;
    background: blue;

  }
  &:focus {
    border: #326da3 1px solid;
    background: #173851;
  }
}

input.number  {
  border-color: @control-color-number;
  color: @control-color-number;
}

input.text  {
  border-color: @control-color-text;
  color: @control-color-text;
}