/// pseudo-input.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

/// Component: pseudo-input
/// This component mimics the presentation of form fields according to Google's
/// Material Design specs (www.google.com/design/spec/components/text-fields.html)
/// It's used in message headers but could --and should-- be reused
/// The pseudo-input-container element serves as a... container for it's two children:
/// -label and -input-field
///
/// Typical use:
/// <div class="pseudo-input-container">
///   <label class="pseudo-input-label">Some text</label>
///   <p class="pseudo-input-field">Other input-like text</p>
/// </div>
///
/// ----------------------------------------------------------------------------

.pseudo-input-container {
  display: block; // Should be (reset to ?) a plain block element
  padding: 0 2px;
  vertical-align: middle;
}
.sg-search-field-container {
  margin-bottom: 12px;
  color: white;
  label {
    color: inherit;
  }
  input {
    color: inherit;
    border: none;
  }
}

.pseudo-input-label,
.button-label {
  display: inline-block;
  margin-top: $mg;
  color: $colorGray;
  font-weight: $sg-font-regular;
  line-height: $sg-line-height-1;
  transform: scale($input-label-float-scale);
}

.pseudo-input-label {
  @include rtl(transform-origin, left top, right top);
}

.button-label {
  @include rtl(transform-origin, left center, right center);
}

.button-label--right {
  @include rtl(transform-origin, right center, left center);
}

.pseudo-input-label--no-margin,
.button-label {
  margin-top: 0;
}

.pseudo-input-field {
  display: block;
  padding-top: $input-padding-top + 2;
  padding-bottom: $input-border-width-focused - $input-border-width-default;
  padding-left: 2px;
  padding-right: 2px;
  border-width: 0;
}

.pseudo-input-field--underline {
  @extend .pseudo-input-field;
  border-bottom: 1px solid $colorGrayLighter;
  &:focus,
  &:active,
  &:hover {
    margin-bottom: ($line - 1);
    border-bottom: 2px solid sg-color($sogoBlue, 500);
  }
}

// The specs dimensions are too large to fit with angular-material
// Here's a modifier
.pseudo-input-container--compact {
  .pseudo-input-label {
    margin-top: 0;
  }
}

input #inner-editor {
  color: $colorGrayLight;
  line-height: inherit;
}