@import "/imports/ui/stylesheets/mixins/focus";
@import "/imports/ui/stylesheets/variables/_all";

.form {
  flex-grow: 0;
  flex-shrink: 0;
  align-self: flex-end;
  width: 100%;
  position: relative;
  margin-bottom: -$sm-padding-x;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  border: $border-size solid $color-gray-lighter;
  background: #fff;
  border-radius: $border-radius 0 0 $border-radius;
  color: $color-gray-light;
  padding: $sm-padding-y $sm-padding-x;
  transition: background .3s;
  cursor: pointer;

  &:hover,
  &:focus {
    background-color: fade-out($color-gray-lighter, .75);
  }

  &:disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: .75;
    background-color: fade-out($color-gray-lighter, .75);
  }
}

.input {
  @include inputFocus($color-blue-light);

  flex: 1;
  background: #fff;
  background-clip: padding-box;
  margin: 0;
  color: $color-text;
  -webkit-appearance: none;
  outline: 0;
  padding: $sm-padding-y * 2.5 $sm-padding-x * 1.25;
  resize: none;
  transition: none;
  border-radius: $border-radius;
  font-size: $font-size-base * .90;
  min-height: 2.5rem;
  max-height: 10rem;
  border: 1px solid $color-gray-lighter;
  box-shadow: 0 0 0 2px $color-gray-lighter;

  &:disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: .75;
    background-color: fade-out($color-gray-lighter, .75);
  }
}

.sendButton {
  margin-left: $sm-padding-x;
  align-self: center;
  font-size: 0.9rem;
  i {
    font-size: 115% !important;
  }
}

.info {
  font-size: $font-size-base * .75;
  color: $color-gray-light;
  text-align: right;
  padding: $border-size 0;

  &:before {
    content: "\00a0"; // non-breaking space
  }
}