<commit_before>////
/// @group select-fields
////

/// The distance that a new value for the select field should drop.
/// @type Number
$md-select-field-drop-distance: 6px !default;

/// The transition time that a new value in a select field should drop.
/// @type Number
$md-select-field-drop-transition-time: $md-transition-time * 2 !default;

/// The left padding for a select field that has a postition of `SelectField.Positions.BELOW`
/// @type Number
$md-select-field-left-padding: 24px;

/// The right padding for a select field that has a postition of `SelectField.Positions.BELOW`
/// @type Number
$md-select-field-right-padding: 16px;

/// Creates the styles for select fields. Like the `autocompletes`, the `SelectField` component
/// also depends on the styles for the `TextField`.
///
/// @example scss - Example Usage SCSS
///   @include react-md-select-fields;
///
/// @see react-md-text-fields
/// @param {Boolean} include-media [$md-media-included] - Boolean if the media queries for select fields
///     should also be included.
@mixin react-md-select-fields($include-media: $md-media-included) {
  .md-select-field {
    cursor: inherit;
    display: flex;
    flex-wrap: wrap;
    user-select: none;

    .md-divider {
      width: 100%;
    }
  }

  .md-select-field-menu--stretch .md-list {
    min-width: 100%;
  }

  // To override text field padding
  .md-select-field--btn.md-select-field--btn {
    padding-bottom: $md-default-padding;
    padding-left: $md-select-field-left-padding;
    padding-right: $md-select-field-right-padding;
    padding-top: $md-default-padding;
  }

  @include react-md-select-fields-drop-transition;

  @if $include-media {
    @include react-md-select-fields-media;
  }
}

/// Creates the styles for select fields on a mobile device. This should
/// _normally_ be used within a media query.
///
/// @example scss - Example Usage SCSS
///   @media #{$md-mobile-media} {
///     @include react-md-select-fields-mobile;
///   }
///
/// @group select-fields, media-queries
@mixin react-md-select-fields-mobile {
  .md-select-field--btn {
    height: $md-text-field-mobile-height;<commit_msg>Fixed the SelectField requiring 2 touches to open<commit_after>////
/// @group select-fields
////

/// The distance that a new value for the select field should drop.
/// @type Number
$md-select-field-drop-distance: 6px !default;

/// The transition time that a new value in a select field should drop.
/// @type Number
$md-select-field-drop-transition-time: $md-transition-time * 2 !default;

/// The left padding for a select field that has a postition of `SelectField.Positions.BELOW`
/// @type Number
$md-select-field-left-padding: 24px;

/// The right padding for a select field that has a postition of `SelectField.Positions.BELOW`
/// @type Number
$md-select-field-right-padding: 16px;

/// Creates the styles for select fields. Like the `autocompletes`, the `SelectField` component
/// also depends on the styles for the `TextField`.
///
/// @example scss - Example Usage SCSS
///   @include react-md-select-fields;
///
/// @see react-md-text-fields
/// @param {Boolean} include-media [$md-media-included] - Boolean if the media queries for select fields
///     should also be included.
@mixin react-md-select-fields($include-media: $md-media-included) {
  .md-select-field {
    cursor: inherit;
    display: flex;
    flex-wrap: wrap;
    user-select: none;

    .md-divider {
      width: 100%;
    }
  }

  .md-select-field-menu--stretch .md-list {
    min-width: 100%;
  }

  // To override text field padding
  .md-select-field--btn.md-select-field--btn {
    padding-bottom: $md-default-padding;
    padding-left: $md-select-field-left-padding;
    padding-right: $md-select-field-right-padding;
    padding-top: $md-default-padding;
  }

  .md-select-field--text-field {
    // without this, mobile safari will not bubble the click event up to the toggle element so the
    // options never appear.
    pointer-events: none;
  }

  @include react-md-select-fields-drop-transition;

  @if $include-media {
    @include react-md-select-fields-media;
  }
}

/// Creates the styles for select fields on a mobile device. This should
/// _normally_ be used within a media query.
///
/// @example scss - Example Usage SCSS
///   @media #{$md-mobile-media} {
///     @include react-md-select-fields-mobile;
///   }
///
/// @group select-fields, media-queries
@mixin react-md-select-fields-mobile {
  .md-select-field--btn {
    height: $md-text-field-mobile-height;
{'fraction_non_alphanumeric': 0.14800884955752214, 'fraction_numerical': 0.0055309734513274336, 'mean_word_length': 2.8248730964467006, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '117724', 'n_tokens_mistral': 1462, 'n_tokens_neox': 1418, 'n_words': 415}