@import "constants";
@import "animations";

body {
  background-color: $color-concrete;
  color: $color-emperor;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.label-primary {
  background-color: $brand-primary;
}

.btn {
  border-radius: 1.5em;
}

.btn-primary {
  background-color: $brand-default;
  border-color: darken($brand-default, 5%);

  &.active,
  &.focus,
  &.active.focus {
    background-color: darken($brand-default, 20%);
    border-color: darken($brand-default, 25%);

    &:hover {
      background-color: darken($brand-default, 25%);
      border-color: darken($brand-default, 30%);
    }
  }

  &:active,
  &:focus,
  &:active:focus,
  &:active:hover,
  &:focus:hover,
  &:active:focus:hover {
    background-color: darken($brand-default, 20%);
    border-color: darken($brand-default, 25%);
  }

  &:hover {
    background-color: darken($brand-default, 5%);
    border-color: darken($brand-default, 10%);
  }
}

// tags input
.react-tagsinput--focused {
  border-color: $brand-primary;
}

.react-tagsinput-input {
  width: 100%;
}

.react-tagsinput-tag {
  background-color: $brand-primary;
  border: 0;
  color: $color-white;
  font-weight: bold;
}

.react-tagsinput-remove {
  color: $color-white;
}
