@import '../index'

.button
  background-color:  $app['palette']['bg-secondary']
  border-color:  $app['palette']['border-secondary']
  color:  $app['palette']['text-secondary']
  border-radius: 0.3em;
  height: 1.5em;
  line-height: 1.5em;
  padding: 0 1em;
  margin: 0.25em;
  cursor: pointer
  text-align: center
  user-select: none
  display: inline-block

.button.error
  background-color:  $app['palette']['error']
  color: $app['white']

.button:hover,
.button:focus
  opacity: 0.7

.button:active
  opacity: 0.3
  border: 0

.button.disabled
  opacity: 0.4
  user-select: none;

.button svg
  vertical-align: middle
  width: 1em;
  height: 1em;


.button.button-push > label
  border: none

.buttons
  display: inline-flex
  position: absolute
  right: 1em
  line-height: 2em

.form .button.disabled
  width: initial;