@import './../scss/helpers/typography';
@import './../scss/helpers/color';


//
// @component
//  Select
// @description
//  A select input component
//
.ts-select {
  display: block;

  // disabled state
  &.disabled {
    pointer-events: none;

    // Overwrite color to appear disabled
    .mat-select-value-text {
      color: color(utility);
    }
  }

  // Custom rules when nested inside the pagination component
  .c-pagination & {
    position: relative;
    top: .2em;
    vertical-align: middle;
    width: 4rem;

    .mat-form-field {
      width: auto;
    }
  }

  // <mat-select>
  .c-select {
    // Top level styles should be nested here
    @include typography;
    display: block;
    max-width: 100%;
  }
}

@import './../scss/helpers/typography';
@import './../scss/helpers/color';


//
// @component
//  Select
// @description
//  A select input component
//
.ts-select {
  display: block;

  // disabled state
  &.disabled {
    pointer-events: none;

    // Overwrite color to appear disabled
    .mat-select-value-text {
      color: color(utility);
    }
  }

  // Custom rules when nested inside the pagination component
  .c-pagination & {
    position: relative;
    top: .2em;
    vertical-align: middle;
    width: 4rem;

    .mat-form-field {
      width: auto;
    }
  }

  // <mat-select>
  .c-select {
    // Top level styles should be nested here
    @include typography;
    display: block;
    max-width: 100%;
  }
}

// Overwrite the default max-height set by Material since the menu was spilling off outside the page
.cdk-overlay-container {
  .mat-menu-panel {
    max-height: calc(80vh - 48px);
  }
}

Select menu now has smaller max-height to not spill out of viewport
fix(Select): Select menu now has smaller max-height to not spill out of viewport
