.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  border-radius: 0;
  border: 0;
  height: 3.5rem;
}

.form-control:focus {
  border-color: $brand-workspace;
}

.form-control-lg.form-control {
  height: 3.5rem !important; // FIXME nix !important
  border: 2px solid $Vlight-gray;
  border-radius: 3px;
  background-color: $Vlight-gray;
  height: 3.5rem;
}

select.form-control {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  padding: 0 1.25rem;
}

.input-group-lg {
  .input-group-prepend button.color-picker {
    height: auto; // because we override font-size on body.
  }

  & > .react-select {
    padding: 0;
  }
}

.btn {
  // override Bootstrap: it transitions colors, and that makes for an ugly
  // flicker in the Tab bar when changing background color. More generally,
  // we prefer instantaneous to 0.15s.
  transition: none;
}
