<commit_before>$select-option-height: 48px;
$select-option-padding: 16px;
$select-container-padding: 16px;
$select-container-transition-duration: 350ms;

$select-max-visible-options: 5;

.md-select-menu-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  opacity: 0;

  // Don't let the user select a new choice while it's animating
  &:not(.md-clickable) {
    pointer-events: none;
  }

  md-progress-circular {
    display: table;
    margin: 3*$baseline-grid auto !important;
  }


  // enter: md-select scales in, then options fade in.
  &.md-active {
    opacity: 1;
    md-select-menu {
      transition: transform $swift-ease-out;
      transition-duration: 200ms;
      > * {
        opacity: 1;
        transition: $swift-ease-in;
        transition-duration: 200ms;
        transition-delay: 100ms;
      }
    }
  }

  // leave: the container fades out
  &.md-leave {
    opacity: 0;
    transition: $swift-ease-in;
    transition-duration: 250ms;
  }
}

md-input-container > md-select {
  margin: 0;
  margin-top: 3px;
}

md-select {
  display: inline-block;
  margin-top: 0.35em;
  margin-bottom: 0.80em;
  margin-left: 2px;
  margin-right: 2px;
  &:focus {
    outline: none;
  }
  &[disabled]:hover {
    cursor: default;
  }
  &:not([disabled]) {
    &:hover {
      cursor: pointer
    }
    &.ng-invalid.ng-dirty {
      .md-select-label {
        border-bottom: 2px solid;
        padding-bottom: $baseline-grid - 5
      }
    }
    &:focus {
      .md-select-label {
        border-bottom: 2px solid;
        padding-bottom: $baseline-grid - 5;
      }
    }
  }
}


.md-select-label {
  display: flex;
  align-items: center;
  padding-left: 3px;
  padding-top: (2 * $baseline-grid) + 4;
  padding-bottom: $baseline-grid - 4;
  border-bottom: 1px solid;
  position: relative;
  box-sizing: border-box;
  min-width: 8 * $baseline-grid;

  *:first-child {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 2*#{$baseline-grid});
  }

  .md-select-icon {
    align-items: flex-end;
    text-align: end;
    width: 3 * $baseline-grid;
    margin: 0 .5 * $baseline-grid;
  }

  .md-select-icon:after {
    display: block;
    content: '\25BC';
    position: relative;
    top: 2px;
    speak: none;
    transform: scaleY(0.6) scaleX(1);
  }
}

md-select-menu {
  display: flex;
  flex-direction: column;
  &.md-reverse {
    flex-direction: column-reverse;
  }

  &:not(.md-overflow) {
    md-content {
      padding-top: $baseline-grid;
      padding-bottom: $baseline-grid;
    }
  }<commit_msg>update(select): minor style tweaks to make select elements work with other inputs<commit_after>$select-option-height: 48px;
$select-option-padding: 16px;
$select-container-padding: 16px;
$select-container-transition-duration: 350ms;

$select-max-visible-options: 5;

.md-select-menu-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  opacity: 0;

  // Don't let the user select a new choice while it's animating
  &:not(.md-clickable) {
    pointer-events: none;
  }

  md-progress-circular {
    display: table;
    margin: 3*$baseline-grid auto !important;
  }


  // enter: md-select scales in, then options fade in.
  &.md-active {
    opacity: 1;
    md-select-menu {
      transition: transform $swift-ease-out;
      transition-duration: 200ms;
      > * {
        opacity: 1;
        transition: $swift-ease-in;
        transition-duration: 200ms;
        transition-delay: 100ms;
      }
    }
  }

  // leave: the container fades out
  &.md-leave {
    opacity: 0;
    transition: $swift-ease-in;
    transition-duration: 250ms;
  }
}

md-input-container > md-select {
  margin: 0;
  margin-top: 3px;
}

md-select {
  display: inline-block;
  margin: 0.125em 2px 1.3em;
  &:focus {
    outline: none;
  }
  &[disabled]:hover {
    cursor: default;
  }
  &:not([disabled]) {
    &:hover {
      cursor: pointer
    }
    &.ng-invalid.ng-dirty {
      .md-select-label {
        border-bottom: 2px solid;
        padding-bottom: $baseline-grid - 5
      }
    }
    &:focus {
      .md-select-label {
        border-bottom: 2px solid;
        padding-bottom: $baseline-grid - 5;
      }
    }
  }
}


.md-select-label {
  display: flex;
  align-items: center;
  padding-left: 3px;
  padding-top: (2 * $baseline-grid) + 4;
  padding-bottom: $baseline-grid - 4;
  border-bottom: 1px solid;
  position: relative;
  box-sizing: border-box;
  min-width: 8 * $baseline-grid;

  *:first-child {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 2*#{$baseline-grid});
    transform: translate3d(0, 3px, 0);
  }

  .md-select-icon {
    align-items: flex-end;
    text-align: end;
    width: 3 * $baseline-grid;
    margin: 0 .5 * $baseline-grid;
    transform: translate3d(0, 1px, 0);
  }

  .md-select-icon:after {
    display: block;
    content: '\25BC';
    position: relative;
    top: 2px;
    speak: none;
    transform: scaleY(0.6) scaleX(1);
  }
}

md-select-menu {
  display: flex;
  flex-direction: column;
  &.md-reverse {
    flex-direction: column-reverse;
  }

  &:not(.md-overflow) {
    md-content {
      padding-top: $baseline-grid;
      padding-bottom: $baseline-grid;
    }
  }
{'fraction_non_alphanumeric': 0.1479446864936541, 'fraction_numerical': 0.02595188482667172, 'mean_word_length': 2.3846153846153846, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '2866918', 'n_tokens_mistral': 2086, 'n_tokens_neox': 1911, 'n_words': 411}