@import '../../00-materials/styles/mixins/check-mark-animated';

$dropdown-border-width: 1px;
$dropdown-color: $color-dark-grey !default;
$dropdown-color--hover: $color-axa-blue !default;
$dropdown-bottom-border-width: 2px;
$dropdown-height: 40px;

@mixin normalize-native-select-styles() {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: inherit;

  &:active,
  &:focus {
    border: none;
    box-shadow: none;
  }

  &::-moz-focus-inner,
  option::-moz-focus-inner {
    border: none;
    box-shadow: none;
    outline: none;
  }

  &:focus::-ms-value {
    color: inherit;
    background: transparent;
  }

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

axa-dropdown {
  display: block;

  .m-dropdown__label {
    @include text(t3);
    display: block;
    font-weight: 600;
    color: $color-dark-grey;
    margin-bottom: 10px;
  }

  .m-dropdown__wrapper {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .m-dropdown__elements {
    position: relative;
    display: flex;
    height: inherit;
    width: 100%;
    padding: 0;
  }

  .m-dropdown__select-wrapper {
    display: flex;
    align-items: center;
    border: $dropdown-border-width solid $color-light-grey;
    width: 100%;
    background-color: $color-prim-white;
    height: $dropdown-height;
    box-sizing: border-box;

    &:hover,
    &:active,
    &:focus {
      border: $dropdown-border-width solid $color-axa-blue;
      box-sizing: border-box;
    }

    &:focus {
      outline: 2px solid $color-axa-blue;
      outline-offset: -2px;
    }
  }

  .m-dropdown__select {
    @include normalize-native-select-styles();
    @include text(t4);
    width: 100%;
    color: $dropdown-color;
    padding: 0 40px 0 20px;
    height: $dropdown-height;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:focus {
      outline: 2px solid $color-axa-blue;
      outline-offset: -1px;
      box-sizing: border-box;
    }
  }

  &[croptext] {
    .m-dropdown__flex-wrapper > span {
      text-overflow: inherit;
    }

    .m-dropdown__select,
    .m-dropdown__toggle {
      padding: 0 36px 0 12px;
    }
  }

  /* FIXME: remove this selectivity hack once v1 CSS problem is systematically addressed, cf. https://github.com/axa-ch-webhub-cloud/pattern-library/issues/1343 */
  .m-dropdown__select-icon.m-dropdown__select-icon {
    display: block;
    position: absolute; // needed for native select: icon should be "behind" the select
    top: ($dropdown-height * 0.5) - (24px * 0.5); // dropdown height / 2 = vertical centered; 24px = height of SVG; 24px / 2 = center of SVG should be center of dropdown
    right: 10px; // like padding-right
    pointer-events: none;
    height: auto;

    svg {
      display: block;
      color: $color-axa-blue;
      transition: transform 0.3s ease;
      pointer-events: none;
      line-height: 0;
      -ms-interpolation-mode: nearest-neighbor;
    }
  }

  .m-dropdown__flex-wrapper {
    display: flex;
    align-items: center;
    width: 100%;

    > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .m-dropdown__toggle {
    @include text(t4);
    position: relative;
    background: $color-prim-white;
    color: $dropdown-color;
    border: $dropdown-border-width solid $color-light-grey;
    padding: 0 40px 0 20px;
    width: 100%;
    box-sizing: border-box;
    height: $dropdown-height;
    text-align: left;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover,
    &:active,
    &:focus {
      border: $dropdown-border-width solid $color-axa-blue;
    }

    &:focus {
      outline: solid 1px $color-axa-blue;
      outline-offset: -2px;
    }
  }

  .m-dropdown__content {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    height: 0;
    min-width: 100%;
    overflow: hidden;
    transition: height 0.3s ease;
    background-color: $color-prim-white;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  }

  .m-dropdown__option,
  .m-dropdown__button {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-dropdown__button {
    @include text(t4);
    display: block;
    width: 100%;
    text-align: left;
    background-color: $color-prim-white;
    border: 0;
    color: $dropdown-color;
    white-space: nowrap;
    margin: 0; /* for Safari, who'd impose 2px margins otherwise */

    &:hover,
    &:active,
    &:focus {
      color: $dropdown-color--hover;
    }

    &:hover {
      background-color: $color-wild-sand;
    }

    &:focus {
      outline: solid 1px $color-axa-blue;
      outline-offset: -1px;
      background-color: $color-wild-sand;
    }
  }

  // ENHANCED LIST-ITEMS
  .m-dropdown__item {
    border-left: $dropdown-border-width solid $color-silver;
    border-right: $dropdown-border-width solid $color-silver;
    box-sizing: border-box;

    &:last-child {
      border-bottom: $dropdown-bottom-border-width solid $color-silver;
      box-sizing: border-box;
    }

    &--is-selected .m-dropdown__button {
      color: $dropdown-color--hover;
    }
  }

  // SHOW ENHANCED OR NATIVE
  .m-dropdown__select-wrapper {
    @media (min-width: $breakpoint-sm) {
      display: none;
    }
  }

  .m-dropdown__toggle,
  .m-dropdown__content {
    display: none;

    @media (min-width: $breakpoint-sm) {
      display: block;
    }
  }

  &[open] {
    .m-dropdown__content {
      height: auto;
      overflow-y: auto;
    }

    .m-dropdown__select-icon svg {
      transform: rotate(180deg);
    }
  }

  &[maxheight=''] {
    .m-dropdown__content {
      max-height: 347px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .m-dropdown__button {
      text-overflow: initial;
    }
  }

  &[native] {
    .m-dropdown__select-wrapper {
      display: flex;
    }

    .m-dropdown__toggle,
    .m-dropdown__content {
      display: none;

      @media (min-width: $breakpoint-sm) {
        display: none;
      }
    }
  }

  &[invalid] {
    .m-dropdown__select,
    .m-dropdown__toggle {
      border-color: $color-shy-tomato;
    }

    .m-dropdown__toggle:focus,
    .m-dropdown__select:focus {
      outline-color: $color-shy-tomato;
    }
  }

  .m-dropdown__check-wrapper {
    @include check-mark-animated-wrapper();
    position: relative;
    margin-left: 10px;
  }

  .m-dropdown__check {
    @include check-mark-animated();
    position: absolute;
    left: 0;
  }

  .m-dropdown__error {
    @include text(t4);
    display: block;
    margin-top: 10px;
    color: $color-shy-tomato;
  }

  .m-dropdown__select:disabled,
  [aria-disabled='true'] {
    color: $color-light-grey;
    pointer-events: none;
  }

  &[disabled] {
    .m-dropdown__select-wrapper,
    .m-dropdown__toggle {
      border-color: $color-mercury;
      background-color: $color-alabaster;
    }

    /* FIXME: remove this selectivity hack once v1 CSS problem is systematically addressed, cf. https://github.com/axa-ch-webhub-cloud/pattern-library/issues/1343 */
    .m-dropdown__select-icon.m-dropdown__select-icon {
      svg {
        color: $color-light-grey;
      }
    }
  }
}
