@import '../../material-design-lite/variables';

$select-width: 300px !default;
$select-height: 56px !default;
$select-padding: 0 26px 0 16px !default;
$select-border-radius: 4px 4px 0 0 !default;
$select-bg-color: rgba(black, 0.04) !default;
$select-bottom-border-color: rgba(black, 0.5) !default;

$select-menu-height: 48px !default;
$select-menu-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1) !default;
$select-menu-item-hover-bg-color: rgba(black, 0.04) !default;
$select-menu-item-active-bg-color: rgba(black, 0.4) !default;
$select-menu-item-active-color: white !default;

@mixin mdl-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: 0.54) {
  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E);
}

.mdl-select {
  position: relative;

  display: inline-flex;
  overflow: visible;

  box-sizing: border-box;
  width: $select-width;
  height: $select-height;

  cursor: pointer;

  border: none;
  border-radius: $select-border-radius;
  outline: none;
  background-repeat: no-repeat;
  background-position: right 10px center;

  @include mdl-select-dd-arrow-svg-bg_;
  align-items: center;
  justify-content: flex-start;

  &__surface {
    position: relative;

    display: flex;
    overflow: hidden;

    width: 100%;
    height: $select-height;
    padding: $select-padding;

    border: none;
    border-radius: $select-border-radius;
    outline: none;
    background-color: $select-bg-color;

    -webkit-font-smoothing: antialiased;
    flex-grow: 1;
    // Resets for <select> element
    appearance: none;

    &::-ms-expand {
      display: none;
    }
  }

  &__selected-text {
    display: flex;
    overflow: hidden;

    transition: mdc-animation-exit-temporary(opacity, 125ms),
      mdc-animation-exit-temporary(transform, 125ms);
    white-space: nowrap;

    align-items: center;
  }

  &__bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;

    transition: $select-menu-transition;
    transform: scaleY(1);
    transform-origin: bottom;

    background-color: $select-bottom-border-color;

    &::after {
      position: absolute;
      z-index: 2;
      bottom: -1px;
      left: 0;

      width: 100%;
      height: 2px;

      content: '';
      transition: $select-menu-transition;
      transform: scaleX(0);

      opacity: 0;
    }
  }

  .mdl-menu__container {
    z-index: 4; // Should pop up above everything else. temporary-drawer is next highest at 3.

    max-height: 100%;

    transform-origin: center center;
  }

  // Overwirte menu style
  .mdl-menu__container,
  .mdl-menu__outline {
    min-width: 100% !important;
  }

  .mdl-menu__outline {
    transition: opacity $menu-fade-duration $animation-curve-default;
  }

  .mdl-menu {
    clip: auto !important; // Remove transition effect

    width: 100%;
    padding: 0;
  }

  .mdl-menu__item {
    line-height: $select-menu-height;

    height: $select-menu-height;
    &:hover {
      background-color: $select-menu-item-hover-bg-color;
    }
    &.active {
      color: $select-menu-item-active-color;
      background-color: $select-menu-item-active-bg-color;
    }
  }
}