$dp-popper-color: #FFF;
$dp-popper-text-color: #000;
$dp-popper-offset: 8px;
$dp-popper-border-width: 1px;
$dp-popper-arrow-width: 8px;

// Popper
//
// Container to position elements in relation to other elements.
//
// Styleguide 2
.dp-popper {
  @include border-radius("m");
  display: none;
  position: absolute;
  text-align: left;
  z-index: $dp-zindex-top;
  background: $dp-greyscale-00;
  border: $dp-popper-border-width solid $dp-sonic-primary;
  box-shadow: 0 3px 10px $dp-greyscale-350;
  font-family: $primary-font;
  font-size: $font-size-m;
  font-weight: $pf-regular;
  color: $dp-greyscale-700;

  &:after,
  &:before {
    width: 0;
    height: 0;
    content: " ";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
  }

  &:hover {
    border: $dp-popper-border-width solid $dp-sonic-secondary;
    box-shadow: 0 3px 10px $dp-greyscale-400;
  }

  hr {
    margin: 0;
    border: 0;
    border-top: 1px solid $dp-greyscale-300;
  }
}

.dp-popper--opened {
  display: block;
}

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

  &:after,
  &:before {
    top: 100%;
    left: 50%;
  }

  &.dp-popper--arrowed {
    &:after {
      border-top-color: $dp-greyscale-00;
      border-width: $dp-popper-arrow-width;
      margin-left: -$dp-popper-arrow-width;
    }

    &:before {
      border-top-color: $dp-sonic-secondary;
      border-width: ($dp-popper-arrow-width + $dp-popper-border-width);
      margin-left: -($dp-popper-arrow-width + $dp-popper-border-width);
    }
  }
}

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

  &:after,
  &:before {
    bottom: 100%;
    left: 50%;
  }

  &.dp-popper--arrowed {
    &:after {
      border-bottom-color: $dp-greyscale-00;
      border-width: $dp-popper-arrow-width;
      margin-left: -$dp-popper-arrow-width;
    }

    &:before {
      border-bottom-color: $dp-sonic-secondary;
      border-width: ($dp-popper-arrow-width + $dp-popper-border-width);
      margin-left: -($dp-popper-arrow-width + $dp-popper-border-width);
    }
  }
}

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

  &:after,
  &:before {
    right: 100%;
    top: 50%;
  }

  &.dp-popper--arrowed {
    &:after {
      border-right-color: $dp-greyscale-00;
      border-width: $dp-popper-arrow-width;
      margin-top: -$dp-popper-arrow-width;
    }

    &:before {
      border-right-color: $dp-sonic-secondary;
      border-width: ($dp-popper-arrow-width + $dp-popper-border-width);
      margin-top: -($dp-popper-arrow-width + $dp-popper-border-width);
    }
  }
}

.dp-popper[x-placement^="left"] {
  margin-left: $dp-popper-offset;

  &:after,
  &:before {
    left: 100%;
    top: 50%;
  }

  &.dp-popper--arrowed {
    &:after {
      border-left-color: $dp-greyscale-00;
      border-width: $dp-popper-arrow-width;
      margin-top: -$dp-popper-arrow-width;
    }

    &:before {
      border-left-color: $dp-sonic-secondary;
      border-width: ($dp-popper-arrow-width + $dp-popper-border-width);
      margin-top: -($dp-popper-arrow-width + $dp-popper-border-width);
    }
  }
}