:host {
  display: block;
  position: relative;
  width: 100%;
  z-index: 10;
}

.hr {
  height: 1px;
  @apply bg-wild-blue-yonder;
  margin-left: -20px;
  margin-right: -20px;
}

.dp {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
  border-radius: 3px;
  width: 350px;

  .triangle {
    width: 30px;
    z-index: -1;
    polygon {
      fill: white;
    }
  }

  /* triangle top right*/
  &.x-position-after.y-position-below {
    margin-top: 11px;
    .triangle {
      @apply absolute;
      margin-top: -10px;
      right: 2px;
    }
  }

  /* triangle top left*/
  &.x-position-before.y-position-below {
    margin-top: 11px;
    .triangle {
      @apply absolute;
      margin-top: -10px;
      left: 2px;
    }
  }

  /* triangle bottom left*/
  &.x-position-before.y-position-above {
    margin-bottom: 11px;
    .triangle {
      @apply absolute  transform rotate-180 origin-center;
      margin-bottom: -10px;
      left: 2px;
    }
  }

  /* triangle bottom right*/
  &.x-position-after.y-position-above {
    margin-bottom: 11px;
    .triangle {
      @apply absolute transform rotate-180 origin-center;
      margin-bottom: -10px;
      right: 2px;
    }
  }
}

.center-actions {
  @apply flex flex-row justify-center;
}
