////
/// @group form
////

@import '@react-md/typography/dist/scss/mixins';
@import '@react-md/utils/dist/scss/mixins';
@import './variables';
@import './file-input/mixins';
@import './label/mixins';
@import './select/mixins';
@import './slider/mixins';
@import './toggle/mixins';
@import './text-field/mixins';

/// @since 2.5.0
/// @access private
@mixin rmd-form-message-container {
  display: flex;
  flex-direction: column;
}

/// @access private
@mixin rmd-form-message {
  @include rmd-typography(body-2, (font-size));
  @include rmd-theme(color, text-secondary-on-background);

  display: flex;
  font-size: $rmd-form-message-font-size;
  margin-bottom: $rmd-form-message-margin-bottom;
  margin-top: $rmd-form-message-margin-top;
  min-height: $rmd-form-message-min-height;

  &--underline {
    padding-left: $rmd-text-field-underline-padding;
    padding-right: $rmd-text-field-underline-padding;
  }

  &--filled {
    padding-left: $rmd-text-field-filled-padding;
    padding-right: $rmd-text-field-filled-padding;
  }

  &--outline {
    padding-left: $rmd-text-field-outline-padding;
    padding-right: $rmd-text-field-outline-padding;
  }

  &--error {
    @include rmd-form-theme(color, error-color);
  }

  &__message {
    margin: 0;
  }

  &__counter {
    @include rmd-utils-rtl-auto(margin-left, auto);
    @include rmd-utils-rtl-auto(
      padding-left,
      $rmd-form-message-counter-spacing
    );

    flex-shrink: 0;
    white-space: nowrap;
  }
}

/// Creates the base styles for a simple fieldset element.
/// @access private
@mixin rmd-fieldset {
  &--unstyled {
    border: 0;
    margin: 0;
    min-width: 0; // just so it can shrink correctly in flex or grid
    padding: 0;
  }

  &__legend {
    @include rmd-typography(body-1);

    &--sr-only {
      @include rmd-utils-sr-only;
    }
  }
}

/// Creates the styles for forms within react-md. This requires either the
/// `rmd-form-use-font-forms` or `rmd-form-use-svg-forms` variables to be
/// enabled to generate any styles.
@mixin react-md-form {
  $omit: (
    addon-top label-left-offset label-top-offset label-active-background-color
      label-active-padding text-offset text-padding-left text-padding-right
      text-padding-top
  );
  @include rmd-theme-create-root-theme($rmd-form-theme-values, form, $omit);

  @include react-md-file-input;
  @include react-md-label;
  @include react-md-slider;
  @include react-md-toggle;
  @include react-md-text-field;
  // has to come after text field since it overrides some of the
  // text-field-container styles
  @include react-md-select;

  .rmd-fieldset {
    @include rmd-fieldset;
  }

  .rmd-form-message-container {
    @include rmd-form-message-container;
  }

  .rmd-form-message {
    @include rmd-form-message;
  }
}