$popover-width:       em(220);
$popover-arrow-width: 10px; // In px to avoid rounding errors with ems
$color-slate--transparent:  rgba($color-slate, 0.95);

.popover-wrapper {
  position: relative;
  cursor: pointer;
  display: inline-block;

  &.js-is-active {
    .popover {
      display: block;
      opacity: 1;
    }
  }
}

.popover {
  position: absolute;
  z-index: $z-popover;
  display: none;
  opacity: 0;
  width: $popover-width;
  text-align: left;
  background-clip: padding-box;
  transition: opacity 300ms ease-in-out;

  @include shopify-breakpoint($mobile) {
    transform: translate(-50%, -100%);
    top: -$popover-arrow-width;
    left: 50%;

    &::after {
      left: 50%;
      border-bottom-width: 0;
      margin-left: -$popover-arrow-width;
    }
  }

  &::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: transparent solid $popover-arrow-width;
  }
}

.popover--top {
  @include shopify-breakpoint($tablet-up) {
    transform: translateY(-50%, -100%);
    top: -$popover-arrow-width;
    left: 50%;

    &::after {
      left: 50%;
      border-bottom-width: 0;
      border-top-color: $color-white;
      margin-left: -$popover-arrow-width;
    }
  }
}

.popover--right {
  @include shopify-breakpoint($tablet-up) {
    left: 100%;
    top: 50%;
    margin-left: $popover-arrow-width * 2;
    transform: translateY(-50%);

    &::after {
      top: 50%;
      border-left-width: 0;
      border-right-color: $color-white;
      bottom: -$popover-arrow-width;
      left: -$popover-arrow-width;
      margin-top: -$popover-arrow-width;
    }
  }
}

.popover--left {
  @include shopify-breakpoint($tablet-up) {
    right: 100%;
    top: 50%;
    margin-right: $popover-arrow-width * 2;
    transform: translateY(-50%);

    &::after {
      top: 50%;
      border-right-width: 0;
      border-left-color: $color-white;
      right: -$popover-arrow-width;
      bottom: -$popover-arrow-width;
      margin-top: -$popover-arrow-width;
    }
  }
}

.popover--bottom {
  @include shopify-breakpoint($tablet-up) {
    left: 50%;
    margin-top: $popover-arrow-width;
    transform: translateX(-50%);

    &::after {
      left: 50%;
      border-top-width: 0;
      border-bottom-color: $color-white;
      top: -$popover-arrow-width;
      margin-left: -$popover-arrow-width;
    }
  }
}


.popover-wrapper--dark {
  .popover {
    &::after {
      @include shopify-breakpoint($mobile) {
        border-top-color: $color-slate--transparent;
      }
    }
  }

  .popover--top {
    &::after {
      @include shopify-breakpoint($tablet-up) {
        border-top-color: $color-slate--transparent;
      }
    }
  }

  .popover--right {
    &::after {
      @include shopify-breakpoint($tablet-up) {
        border-right-color: $color-slate--transparent;
      }
    }
  }

  .popover--bottom {
    &::after {
      @include shopify-breakpoint($tablet-up) {
        border-bottom-color: $color-slate--transparent;
      }
    }
  }

  .popover--left {
    &::after {
      @include shopify-breakpoint($tablet-up) {
        border-left-color: $color-slate--transparent;
      }
    }
  }

  .popover-content {
    background-color: $color-slate--transparent;
    color: $color-white;
  }
}

.popover-content {
  background-color: $color-white;
  padding: em(8) em(10);
  border-radius: $border-radius;
  box-shadow: 0 0 em(2) em(1) rgba($color-grey-body, 0.4);

  .popover-dropdown & {
    padding: em($gutter / 2) em($gutter);

    li {
      display: block;
      line-height: em(16);
    }

    a {
      display: block;
      position: relative;
      color: $color-grey-body;
      padding: em(10) 0;

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

.popover-dropdown {
  .popover__arrow {
    &::after {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: em(-3);
      width: $popover-arrow-width;
      height: em(12);
      content: '';
      background-image: asset-svg-url(caret-down, $color-nav-icon);
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }

  &.js-is-active {
    .popover__arrow {
      color: $color-white;

      &::after {
        background-image: asset-svg-url(caret-down, $color-white);
      }
    }
  }
}