@import '~@/styles/vars';

button,
.btn,
.btn-action,
.btn-icon {
  border: 0;
  border-radius: .25em;
  cursor: pointer;
  font-family: $body-font;
  font-size: inherit;
  font-weight: bold;
  padding: .5em 1em;

  a { text-decoration: none; }
}

.btn, .btn-icon { color: $fg-primary; }

.btn-icon {

  border-radius: 1em;
  padding: .5em;
  margin: 0 .5em;

  &:hover, &:focus {
    background-color: darken($bg-primary, 20%);
  }
}

.btn-action {
  background-color: $color2;
  color: $color3;
  cursor: pointer;
  position: relative;

  &:hover, &:focus {
    background-color: lighten($color2, 20%);
  }
}

.form-waiting .wait-spinner {
  border: solid thin $fg-primary;
  border-radius: .25em;
  cursor: wait;
  font-family: $body-font;
  font-size: inherit;
  padding: .5em 1em;
}

a.btn, a.btn-action { text-decoration: none; }

.header,
.header-action {
  align-items: baseline;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.header-action {
  display: flex;
  justify-content: space-between;

  & > * { display: inline-block; }

  & > .btn, & > .btn-action { font-size: inherit; }
}

.main { flex-grow: 1; }

form {
  display: flex;
  flex-direction: column;

  label {
    display: inline-block;
    margin: .5rem 0;
    min-width: 10em;
  }

  select { background-color: white; }

  .form-actions,
  .form-waiting {
    display: flex;
    flex-direction: row-reverse;
  }
}

input,
select,
textarea {
  font-size: inherit;
  padding: .35em .5em;

  &:disabled { cursor: wait; }
}

textarea { font-family: $body-font; }