@import '../../_sass/arrows/config';
@import '../../_sass/arrows/mixins';
@import '../../_sass/dropdown/mixins';
@mixin m-build-component--dropdown-base($layout) {
  .m-dropdown {
    position: relative;

    &.m-dropdown--inline {
      display: inline-block;
    }

    // dropdown toggle
    .m-dropdown__toggle {
      .la-ellipsis-h {
        font-size: get-font-size(icon, '+++++');
      }
    }

    // dropdowndown wrapper
    .m-dropdown__wrapper {
      top: 100%;
      text-align: left;
      display: none;
      position: absolute;
      z-index: array-get($layout, base, self, zindex);
      padding-top: array-get($layout, base, self, space);
      width: array-get($layout, base, self, width, default);

      // rounded mode
      @include rounded {
        @include border-radius(array-get($layout, base, self, border-radius));
        .m-dropdown__inner {
          @include border-radius(array-get($layout, base, self, border-radius));

          .mCSB_container,
          .mCustomScrollBox,
          .m-dropdown__content,
          .m-dropdown__scrollable {
            @include border-radius(array-get($layout, base, self, border-radius));
          }
        }
      }

      @include fix-animation-lags();
      @include fix-fixed-position-lags();
    }

    // dropdown header, body and footer
    .m-dropdown__wrapper {
      .m-dropdown__header {
        padding: array-get($layout, base, header, self, padding);

        @include rounded {
          @include border-radius(array-get($layout, base, self, border-radius) array-get($layout, base, self, border-radius) 0 0);
        }

        .m-dropdown__header-title {
          display: block;
          padding: array-get($layout, base, header, title, padding);
          font-size: get-font-size(regular, '++++');
          font-weight: get-font-weight(bold);
        }

        .m-dropdown__header-subtitle {
          display: block;
          padding: array-get($layout, base, header, subtitle, padding);
          font-size: get-font-size(regular);
        }
      }

      .m-dropdown__body {
        padding: array-get($layout, base, body, padding);

        .mCSB_scrollTools {
          right: array-get($layout, base, body, scrollbar, right);
        }

        &.m-dropdown__body--paddingless {
          padding: 0;

          .mCSB_scrollTools {
            right: 0;
          }
        }
      }

      .m-dropdown__footer {
        padding: array-get($layout, base, footer, padding);
      }
    }

    // rounded mode
    @include rounded {
      // dropdown header bg fill mode
      &.m-dropdown--header-bg-fil {
        .m-dropdown__wrapper {
          .m-dropdown__inner {
            @include border-radius(array-get($layout, base, self, border-radius) + 4px array-get($layout, base, self, border-radius) + 4px array-get($layout, base, self, border-radius) array-get($layout, base, self, border-radius));

            .m-dropdown__header {
              @include border-radius(array-get($layout, base, self, border-radius) array-get($layout, base, self, border-radius) 0 0);
            }
          }
        }
      }

      // dropdown footer bg fill mode
      &.m-dropdown--footer-bg-fil {
        .m-dropdown__wrapper {
          .m-dropdown__inner {
            @include border-radius(array-get($layout, base, self, border-radius) array-get($layout, base, self, border-radius) array-get($layout, base, self, border-radius) + 4px array-get($layout, base, self, border-radius) + 4px);

            .m-dropdown__footer {
              @include border-radius(0 0 array-get($layout, base, self, border-radius) array-get($layout, base, self, border-radius));
            }
          }
        }
      }
    }

    // open and hover states
    &.m-dropdown--open,
    &.m-dropdown--hoverable:hover {
      .m-dropdown__wrapper {
        display: block;
        @include animation('m-dropdown-fade-in .3s ease 1, m-dropdown-move-up .3s ease-out 1');

        // ie8-11 versions hack
        @include hack-ie8-11 {
          @include animation(none);
        }
      }
    }

    // dropdowndown placement - top
    &.m-dropdown--up {
      .m-dropdown__wrapper {
        padding-top: 0;
        top: auto;
        bottom: 100%;
        padding-bottom: array-get($layout, base, self, space);
      }

      &.m-dropdown--open,
      &.m-dropdown--hoverable:hover {
        .m-dropdown__wrapper {
          display: block;
          @include animation('m-dropdown-fade-in .3s ease 1, m-dropdown-move-down .3s ease-out 1');

          // ie8-11 versions hack
          @include hack-ie8-11 {
            @include animation(none);
          }
        }
      }
    }

    // align to right
    &.m-dropdown--align-right {
      .m-dropdown__wrapper {
        right: 0;
      }

      // push dropdowndown to the right
      &.m-dropdown--align-push {
        .m-dropdown__wrapper {
          margin-right: -(array-get($layout, base, self, align-push-offset));
        }
      }
    }

    // align to left
    &.m-dropdown--align-left {
      .m-dropdown__wrapper {
        left: 0;
      }

      // push dropdowndown to the left
      &.m-dropdown--align-push {
        .m-dropdown__wrapper {
          margin-left: -(array-get($layout, base, self, align-push-offset));
        }
      }
    }

    // align to center
    &.m-dropdown--align-center {
      .m-dropdown__wrapper {
        left: 50%;
        width: array-get($layout, base, self, width, default);
        margin-left: -(array-get($layout, base, self, width, default) / 2);
      }
    }
  }

  // desktop mode
  @include desktop() {
    //== Dropdown
    .m-dropdown {
      // dropdown width options
      @each $name, $width in array-get($layout, base, self, width) {
        @if ($name != default) {
          &.m-dropdown--#{$name} {
            .m-dropdown__wrapper {
              width: $width;
            }
          }
        }
      }

      // align to center
      &.m-dropdown--align-center {
        @each $name, $width in array-get($layout, base, self, width) {
          @if ($name != default) {
            &.m-dropdown--#{$name} {
              .m-dropdown__wrapper {
                width: $width;
                margin-left: -($width / 2);
              }
            }
          }
        }
      }
    }
  }

  // mobile full width mode
  @include mobile() {
    //== Full width mode
    .m-dropdown.m-dropdown--mobile-full-width.m-dropdown--align-center,
    .m-dropdown.m-dropdown--mobile-full-width {
      > .m-dropdown__wrapper {
        width: auto;
        margin: 0 auto;
        left: array-get($layout, base, self, mobile-indent);
        right: array-get($layout, base, self, mobile-indent);

        .m-dropdown__header {
          .m-dropdown__header-title {
            font-size: get-font-size(regular, '++');
            font-weight: get-font-weight(bolder);
          }

          .m-dropdown__header-subtitle {
            font-size: get-font-size(regular);
          }
        }
      }
    }
  }

  // dropoff
  .m-dropdown__dropoff {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: array-get($layout, base, self, zindex) - 1;
  }

  // dropdown animations
  @include keyframes(m-dropdown-fade-in) {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @include keyframes(m-dropdown-move-up) {
    from {
      margin-top: array-get($layout, base, self, animation, offset);
    }
    to {
      margin-top: 0;
    }
  }

  @include keyframes(m-dropdown-arrow-move-up) {
    from {
      margin-top: array-get($layout, base, self, animation, offset);
    }
    to {
      margin-top: 0px;
    }
  }

  @include keyframes(m-dropdown-move-down) {
    from {
      margin-bottom: array-get($layout, base, self, animation, offset);
    }
    to {
      margin-bottom: 0;
    }
  }

  @include keyframes(m-dropdown-arrow-move-down) {
    from {
      margin-bottom: array-get($layout, base, self, animation, offset);
    }
    to {
      margin-bottom: 0px;
    }
  }
}

//== Smooth arrow base
@mixin m-build-component--dropdown-smooth-arrow-base($layout) {
  .m-dropdown.m-dropdown--arrow {

    // placement - bottom
    .m-dropdown__wrapper {
      padding-top: array-get($m-smooth-arrows, size, default, top, height);
    }

    // placement - top
    &.m-dropdown--up {
      .m-dropdown__wrapper {
        padding-top: 0;
        padding-bottom: array-get($m-smooth-arrows, size, default, bottom, height);

        .m-dropdown__arrow {
          @include m--build-smooth-arrow-vertical(top, default);
          top: auto;
          position: absolute;
          margin-top: 0;

          // ie8-11 versions hack
          @include hack-ie8-11 {
            margin-top: -1px;
          }

          // edge all versions hack
          @include hack-edge-all {
            margin-top: -1px;
          }
        }
      }
    }

    // dropdowndown arrow
    &.m-dropdown--up .m-dropdown__arrow,
    .m-dropdown__arrow {
      @include m--build-smooth-arrow-vertical(bottom, default);
      top: 0;
      position: absolute;

      // left arrow
      &.m-dropdown__arrow--left {
        left: array-get($layout, base, arrow, smooth, offset);
        margin-left: 0;
      }

      // right arrow
      &.m-dropdown__arrow--right {
        right: array-get($layout, base, arrow, smooth, offset);
        left: auto;
        margin-left: auto;
      }
    }
  }
}

//== Classic arrow base
@mixin m-build-component--dropdown-classic-arrow-base($layout) {
  .m-dropdown.m-dropdown--arrow {
    .m-dropdown__arrow {
      display: none !important;
    }

    // placement - bottom
    .m-dropdown__wrapper1 {
      padding-top: array-get($layout, base, arrow, classic, size) - 1px;
    }

    // placement - top
    &.m-dropdown--up1 {
      .m-dropdown__wrapper {
        padding-top: 0;
        padding-bottom: array-get($layout, base, arrow, classic, size) - 1px;

        .m-dropdown__arrow {
          border: 0;
          @include m--build-classic-arrow(bottom, array-get($layout, base, arrow, classic, size));
          top: auto;
          position: absolute;
          margin-top: 0;

          // ie8-11 versions hack
          @include hack-ie8-11 {
            margin-top: -1px;
          }

          // edge all versions hack
          @include hack-edge-all {
            margin-top: -1px;
          }
        }
      }
    }

    // dropdowndown arrow
    &.m-dropdown--up1 .m-dropdown__arrow1,
    .m-dropdown__arrow1 {
      @include m--build-classic-arrow(top, array-get($layout, base, arrow, classic, size));
      top: 0;
      position: absolute;
      left: 50%;
      margin-left: -(array-get($layout, base, arrow, classic, size));

      // left arrow
      &.m-dropdown__arrow--left {
        left: array-get($layout, base, arrow, classic, offset);
        margin-left: 0;
      }

      // right arrow
      &.m-dropdown__arrow--right {
        right: array-get($layout, base, arrow, classic, offset);
        left: auto;
        margin-left: auto;
      }
    }
  }
}

//== Dropdown skin
@mixin m-build-component--dropdown-skin($layout, $skin) {

  @include component-skin(m-dropdown, $skin) {

    @include m-component--dropdown--set-bg-color(array-get($layout, self, bg-color), array-get($layout, self, box-shadow));

    .m-dropdown__header {
      @include shadow(array-get($layout, header, self, box-shadow));
    }

    &.m-dropdown--header-bg-fill {
      @include m-component--dropdown--set-arrow-color(array-get($layout, header, self, bg-color));

      .m-dropdown__header {
        background-color: array-get($layout, header, self, bg-color);

        .m-dropdown__header-title {
          color: array-get($layout, header, title, color);
        }

        .m-dropdown__header-subtitle {
          color: array-get($layout, header, subtitle, color);
        }
      }
    }
  }
}

@include m-build-component--dropdown-base(array-get($m--dropdown, layout));

@if smooth-arrow() {
  @include m-build-component--dropdown-smooth-arrow-base(array-get($m--dropdown, layout));
} @else {
  @include m-build-component--dropdown-classic-arrow-base(array-get($m--dropdown, layout));
}

@include m-build-component--dropdown-skin(array-get($m--dropdown, skins, dark), dark);

@include m-build-component--dropdown-skin(array-get($m--dropdown, skins, light), light);