// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

@import 'package:angular_components/material_popup/mixins';

// Sass mixins for customizing material-input

/// Changes the material-input's label to be $color
@mixin input-label-color($color) {
  ::ng-deep .top-section > .input-container > .label > .label-text {
    color: $color;
  }
}

@mixin input-leading-glyph-color($color) {
  ::ng-deep .glyph {
    color: $color;
  }
}

@mixin material-input-clear-icon-color($color) {
  ::ng-deep .clear-icon {
    color: $color;
    opacity: 1;
  }
}

/// Changes the padding of the top section (without underline) of material
/// input.
@mixin input-top-section-padding($padding) {
  ::ng-deep .top-section {
    padding: $padding;
  }
}

/// Changes the margin of the top section (without underline) of material
/// input.
@mixin input-top-section-margin($margin) {
  ::ng-deep .top-section {
    margin: $margin;
  }
}

/// Changes the padding around the material-input.
@mixin input-padding($padding) {
  ::ng-deep material-input.themeable {
    padding: $padding;
  }
}

/// Changes the flex-grow property of the material-input.
@mixin input-flex-grow($grow) {
  ::ng-deep material-input.themeable {
    flex-grow: $grow;
  }
}

/// Changes the line-height of the top section (without underline) of material
/// input.
@mixin input-top-section-line-height($line-height) {
  ::ng-deep .top-section {
    line-height: $line-height;
  }
}

/// Hides the bottom section of material input.
@mixin input-hide-bottom-section() {
  ::ng-deep .bottom-section {
    display: none;
  }
}

/// Hides empty space in bottom section of material input.
///
/// Prefer default behavior or input-hide-bottom-section(). This may be useful
/// when space is truly limited, but error messages are still necessary.
@mixin input-hide-bottom-spaceholder() {
  ::ng-deep .spaceholder {
    display: none;
  }
}

/// Changes the bottom section margin of material input.
@mixin input-bottom-section-margin($margin) {
  ::ng-deep .bottom-section {
    margin: $margin;
  }
}

/// Changes the bottom section padding of material input.
@mixin input-bottom-section-padding($padding) {
  ::ng-deep .bottom-section {
    padding: $padding;
  }
}

/// Changes the bottom section width of material input.
@mixin input-bottom-section-width($width) {
  ::ng-deep .bottom-section {
    width: $width;
  }
}

/// Changes the padding of the leading text.
@mixin material-input-leading-text-padding($padding) {
  ::ng-deep .leading-text {
    padding: $padding;
  }
}

/// Changes the color of the leading text.
@mixin material-input-leading-text-color($color) {
  ::ng-deep .leading-text {
    color: $color;
  }
}

/// Changes the padding of the trailing text.
@mixin material-input-trailing-text-padding($padding) {
  ::ng-deep .trailing-text {
    padding: $padding;
  }
}

/// Changes the color of the trailing text.
@mixin material-input-trailing-text-color($color) {
  ::ng-deep .trailing-text {
    color: $color;
  }
}

/// Changes the background color of the trailing text.
@mixin material-input-trailing-background-color($color) {
  ::ng-deep .trailing-text {
    background-color: $color;
  }
}

/// Changes the background color of the trailing text.
@mixin material-input-trailing-background-radius($radius) {
  ::ng-deep .trailing-text {
    border-radius: $radius;
  }
}

/// Hides leading text in cases where it is managed by a separate element.
@mixin material-input-hide-leading-text() {
  ::ng-deep .leading-text {
    display: none;
  }
}

/// Hides trailing text in cases where it is managed by a separate element.
@mixin material-input-hide-trailing-text() {
  ::ng-deep .trailing-text {
    display: none;
  }
}

/// Changes the `$primary-color`in the material-input which includes the label
/// text and underline.
// TODO(google): Modifier shouldn't be needed but this mixin is poorly written
// refactor to remove it.
@mixin material-input-theme($primary-color, $modifier: '') {
  ::ng-deep material-input.themeable#{$modifier} {
    @include material-input-focused-underline-color($primary-color);

    .cursor {
      background-color: $primary-color;
    }

    .focused.label-text:not(.invalid) {
      color: $primary-color;
    }
  }
}

/// Changes the counter text color.
@mixin material-input-counter-color($color) {
  ::ng-deep .counter {
    color: $color;
  }
}

/// Changes the bottom section of the material input to not wrap.
@mixin error-text-nowrap() {
  ::ng-deep .error-text {
    white-space: nowrap;
  }
}

@mixin error-text-width($width) {
  ::ng-deep .error-text {
    position: absolute;
    width: $width;
  }
}

@mixin material-input-no-underline() {
  ::ng-deep .underline {
    display: none;
  }
}

@mixin material-input-hidden-underline() {
  ::ng-deep .underline {
    visibility: hidden;
  }
}

@mixin input-enforce-ltr() {
  ::ng-deep {
    .input,
    .textarea {
      /*! @noflip */
      direction: ltr;

      :host-context([dir="rtl"]) & {
        /*! @noflip */
        text-align: right;
      }
    }
  }
}

@mixin material-input-display-focused-underline() {
  ::ng-deep .focused-underline {
    transform: scale(1);
    visibility: visible;
  }
}

@mixin material-input-focused-underline-color($color) {
  ::ng-deep .focused-underline:not(.invalid) {
    background-color: $color;
  }
}

/// Changes the underline color when not in focus.
@mixin material-input-unfocused-underline-color($color) {
  ::ng-deep .unfocused-underline:not(.invalid) {
    background-color: $color;
  }
}

/// Changes the disabled dotted underline color.
@mixin material-input-disabled-underline-color($color) {
  ::ng-deep .disabled-underline {
    border-color: $color;
  }
}

@mixin material-input-disabled-input-color($color) {
  ::ng-deep .disabledInput {
    color: $color;
  }
}

/// Changes the disabled color of leading and trailing text.
@mixin material-input-disabled-leading-trailing-text-color($color) {
  ::ng-deep .top-section.disabled {
    .leading-text,
    .trailing-text {
      color: $color;
    }
  }
}

/// Changes the font size of all text including the leading and trailing
/// text and glyphs.
@mixin material-input-font-size($font-size) {
  ::ng-deep {
    .leading-text,
    .trailing-text,
    .input {
      font-size: $font-size;
    }
  }
}

/// Changes the padding of the multiline material input.
@mixin multiline-material-input-padding($padding) {
  ::ng-deep {
    .label,
    .mirror-text,
    .textarea {
      box-sizing: border-box;
      padding: $padding;
    }
  }
}

/// Disable wrapping for bottom section hint text.
@mixin material-input-hint-text-nowrap() {
  ::ng-deep {
    .hint-text {
      white-space: nowrap;
    }
  }
}

/// Changes the vertical-align of the label text.
@mixin material-input-label-text-vertical-align($vertical-align) {
  ::ng-deep {
    .label-text {
      vertical-align: $vertical-align;
    }
  }
}

/// For multiline input, make the top section grow to take up
/// as much space as possible, and show scroll when necessary.
@mixin material-input-multiline-flex-grow-and-scroll() {
  ::ng-deep .baseline {
    flex-grow: 1;
    overflow: hidden;
    height: 90%; // Leave some space for bottom-section.
  }

  ::ng-deep .top-section {
    flex-grow: 1;
    overflow: auto;
  }
}

@mixin input-center-text() {
  ::ng-deep {
    .input,
    .textarea {
      text-align: center;
    }
  }
}

/// Changes the position of the label text above the input box when it's animated.
@mixin material-input-animated-label-text-position() {
  ::ng-deep {
    transform: translateY(-100%) translateY(-$mat-grid);
  }
}
