// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-select-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  [ap-select] {
    margin: 8px 0;
    max-width: 220px;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }
    .md-select-trigger {
      width: 100%;
      height: 38px;
      border: 1px solid md-color($md-ap-grey, 500);
      padding: 10px;
      margin: 8px 0;
      background: white;
      overflow: hidden;

      .md-select-placeholder {
        position: absolute;
        transform: translate3d(0px, 0px, 0px) scale(1) !important;
      }

      .md-select-value {
        width: 100%;
        background: white;
        width: 100%;
        position: relative;
        top: 0;
      }
      .md-select-arrow { margin-left: auto; }
    }

    &[no-border] {
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .md-select-trigger {
        border: 0;
        padding: 0;
        margin: 0;
        min-width: auto;
        background: transparent;
        .md-select-arrow { margin-left: 5px; }
      }
    }
    &[only-arrow] {
      .md-select-trigger .md-select-value { display: none; }
    }
  }

}