@import "mixins/mixins";
@import "common/var";

@include b(trigger) {
  .trigger__arrow {
    position: absolute;
    z-index: -1;
    display: block;
    box-sizing: border-box;
  }
  &[x-placement^="bottom"],
  &[x-placement^="bottom-start"],
  &[x-placement^="bottom-end"] {
    margin-top: 12px !important;
  }
  &[x-placement^="top"],
  &[x-placement^="top-start"],
  &[x-placement^="top-end"] {
    margin-bottom: 12px !important;
  }
  &[x-placement^="bottom"] .trigger__arrow,
  &[x-placement^="bottom-start"] .trigger__arrow,
  &[x-placement^="bottom-end"] .trigger__arrow {
    width: 0;
    height: 0;
    border: $--trigger-size-arrow-width solid #000;
    border-top-color: $--trigger-color-arrow-bg;
    border-bottom-color: transparent;
    border-left-color: $--trigger-color-arrow-bg;
    border-right-color: transparent;
  }

  &[x-placement^="top"] .trigger__arrow,
  &[x-placement^="top-start"] .trigger__arrow,
  &[x-placement^="top-end"] .trigger__arrow {
    bottom: 0;
    width: 0;
    height: 0;
    border: $--trigger-size-arrow-width solid #000;
    border-top-color: transparent;
    border-bottom-color: $--trigger-color-arrow-bg;
    border-left-color: transparent;
    border-right-color: $--trigger-color-arrow-bg;
  }

  &[x-placement^="left"] .trigger__arrow,
  &[x-placement^="left-start"] .trigger__arrow,
  &[x-placement^="left-end"] .trigger__arrow {
    width: 0;
    height: 0;
    border: $--trigger-size-arrow-width solid #000;
    border-top-color: $--trigger-color-arrow-bg;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: $--trigger-color-arrow-bg;
  }
  &[x-placement^="left"],
  &[x-placement^="left-start"],
  &[x-placement^="left-end"] {
    margin-right: 12px !important;
  }
  &[x-placement^="right"] .trigger__arrow,
  &[x-placement^="right-start"] .trigger__arrow,
  &[x-placement^="right-end"] .trigger__arrow {
    width: 0;
    height: 0;
    border: $--trigger-size-arrow-width solid #000;
    border-top-color: transparent;
    border-bottom-color: $--trigger-color-arrow-bg;
    border-left-color: $--trigger-color-arrow-bg;
    border-right-color: transparent;
  }
  &[x-placement^="right"],
  &[x-placement^="right-start"],
  &[x-placement^="right-end"] {
    margin-left: 12px !important;
  }
}