@import '../../assets/scss/components/popper/_variables';

.st-popper {
  $root: &;

  z-index: $st-popper-z-index;
  padding: $st-popper-padding;
  background: $st-popper-background-color;
  border-radius: $st-popper-border-radius;
  box-shadow: $st-popper-box-shadow;

  &__arrow {
    position: absolute;
    width: 0;
    height: 0;
    margin: $st-popper-arrow-size;
    border: 0 solid transparent;

    // arrow shadow
    &::before {
      position: absolute;
      z-index: -1;
      width: $st-popper-arrow-shadow-size;
      height: $st-popper-arrow-shadow-size;
    }

    // arrow shadow-outline
    &::after {
      position: absolute;
      z-index: -1;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: $st-popper-arrow-outline-size;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: $st-popper-offset;

    #{$root}__arrow {
      top: -$st-popper-arrow-size;
      left: calc(50% - #{$st-popper-arrow-size});
      margin-top: 0;
      margin-bottom: 0;
      clip: rect(-$st-popper-arrow-shadow-size * 3, $st-popper-arrow-shadow-size * 3, auto, -$st-popper-arrow-shadow-size);
      border-width: 0 $st-popper-arrow-size $st-popper-arrow-size $st-popper-arrow-size;
      border-bottom-color: $st-popper-background-color;

      &::before {
        top: $st-popper-arrow-shadow-size / 2;
        left: -($st-popper-arrow-shadow-size / 2);
        content: "";
        box-shadow: 0 #{-$st-popper-arrow-shadow-offset} $st-popper-arrow-shadow-blur $st-popper-arrow-shadow-spread $st-popper-arrow-shadow-color;
      }

      &::after {
        top: -1px;
        margin-left: -$st-popper-arrow-outline-size;
        content: "";
        border-top-width: 0;
        border-bottom-color: $st-popper-arrow-outline-color;
      }
    }
  }

  &[x-placement^="right"] {
    margin-left: $st-popper-offset;

    #{$root}__arrow {
      top: calc(50% - #{$st-popper-arrow-size});
      left: -$st-popper-arrow-size;
      margin-right: 0;
      margin-left: 0;
      clip: rect(-$st-popper-arrow-shadow-size, auto, $st-popper-arrow-shadow-size * 3, -$st-popper-arrow-shadow-size * 3);
      border-width: $st-popper-arrow-size $st-popper-arrow-size $st-popper-arrow-size 0;
      border-right-color: $st-popper-background-color;

      &::before {
        top: -($st-popper-arrow-shadow-size / 2);
        left: $st-popper-arrow-shadow-size / 2;
        content: "";
        box-shadow: -$st-popper-arrow-shadow-offset 0 $st-popper-arrow-shadow-blur $st-popper-arrow-shadow-spread $st-popper-arrow-shadow-color;
      }

      &::after {
        left: -1px;
        margin-top: -$st-popper-arrow-outline-size;
        content: "";
        border-right-color: $st-popper-arrow-outline-color;
        border-left-width: 0;
      }
    }
  }

  &[x-placement^="left"] {
    margin-right: $st-popper-offset;

    #{$root}__arrow {
      top: calc(50% - #{$st-popper-arrow-size});
      right: -$st-popper-arrow-size;
      margin-right: 0;
      margin-left: 0;
      clip: rect(-$st-popper-arrow-shadow-size, $st-popper-arrow-shadow-size * 3, $st-popper-arrow-shadow-size * 3, auto);
      border-width: $st-popper-arrow-size 0 $st-popper-arrow-size $st-popper-arrow-size;
      border-left-color: $st-popper-background-color;

      &::before {
        top: -($st-popper-arrow-shadow-size / 2);
        right: $st-popper-arrow-shadow-size / 2;
        content: "";
        box-shadow: $st-popper-arrow-shadow-offset 0 $st-popper-arrow-shadow-blur $st-popper-arrow-shadow-spread $st-popper-arrow-shadow-color;
      }

      &::after {
        right: -1px;
        margin-top: -$st-popper-arrow-outline-size;
        content: "";
        border-right-width: 0;
        border-left-color: $st-popper-arrow-outline-color;
      }
    }
  }

  &[x-placement^="top"] {
    margin-bottom: $st-popper-offset;

    #{$root}__arrow {
      bottom: -$st-popper-arrow-size;
      left: calc(50% - #{$st-popper-arrow-size});
      margin-top: 0;
      margin-bottom: 0;
      clip: rect(auto, $st-popper-arrow-shadow-size * 3, $st-popper-arrow-shadow-size * 3, -$st-popper-arrow-shadow-size);
      border-width: $st-popper-arrow-size $st-popper-arrow-size 0 $st-popper-arrow-size;
      border-top-color: $st-popper-background-color;

      &::before {
        bottom: $st-popper-arrow-shadow-size / 2;
        left: -($st-popper-arrow-shadow-size / 2);
        content: "";
        box-shadow: 0 $st-popper-arrow-shadow-offset $st-popper-arrow-shadow-blur $st-popper-arrow-shadow-spread $st-popper-arrow-shadow-color;
      }

      &::after {
        bottom: -1px;
        margin-left: -$st-popper-arrow-outline-size;
        content: "";
        border-top-color: $st-popper-arrow-outline-color;
        border-bottom-width: 0;
      }
    }
  }

  &--bordered {
    border: $st-popper-border-style $st-popper-border-width $st-popper-border-color;

    #{$root}__arrow {
      &::before {
        display: block;
        content: '';
        border: solid 0 transparent;
      }
    }

    &#{$root}[x-placement^="right"] #{$root}__arrow {
      border-right-color: $st-popper-border-color;

      &::before {
        $inner-arrow-size: $st-popper-arrow-size - ($st-popper-border-width * 2);

        margin-top: ($st-popper-arrow-size - ($st-popper-border-width * 2)) * -1;
        margin-left: $st-popper-border-width * 2;
        border-width: $inner-arrow-size $inner-arrow-size $inner-arrow-size 0;
        border-right-color: $st-popper-background-color;
      }
    }

    &#{$root}[x-placement^="bottom"] #{$root}__arrow {
      border-bottom-color: $st-popper-border-color;

      &::before {
        $inner-arrow-size: $st-popper-arrow-size - ($st-popper-border-width * 2);

        margin-top: $st-popper-border-width * 2;
        margin-left: ($st-popper-arrow-size - ($st-popper-border-width * 2)) * -1;
        border-width: 0 $inner-arrow-size $inner-arrow-size $inner-arrow-size;
        border-bottom-color: $st-popper-background-color;
      }
    }

    &#{$root}[x-placement^="left"] #{$root}__arrow {
      border-left-color: $st-popper-border-color;

      &::before {
        $inner-arrow-size: $st-popper-arrow-size - ($st-popper-border-width * 2);

        margin-top: ($st-popper-arrow-size - ($st-popper-border-width * 2)) * -1;
        margin-left: -$st-popper-arrow-size;
        border-width: $inner-arrow-size 0 $inner-arrow-size $inner-arrow-size;
        border-left-color: $st-popper-background-color;
      }
    }

    &#{$root}[x-placement^="top"] #{$root}__arrow {
      border-top-color: $st-popper-border-color;

      &::before {
        $inner-arrow-size: $st-popper-arrow-size - ($st-popper-border-width * 2);

        margin-top: -$st-popper-arrow-size;
        margin-left: ($st-popper-arrow-size - ($st-popper-border-width * 2)) * -1;
        border-width: $inner-arrow-size $inner-arrow-size 0 $inner-arrow-size;
        border-top-color: $st-popper-background-color;
      }
    }
  }

  &--with-arrow {
    &[x-placement^="bottom"] {
      margin-top: $st-popper-with-arrow-offset;
    }

    &[x-placement^="top"] {
      margin-bottom: $st-popper-with-arrow-offset;
    }

    &[x-placement^="left"] {
      margin-right: $st-popper-with-arrow-offset;
    }

    &[x-placement^="right"] {
      margin-left: $st-popper-offset;
    }
  }
}