@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$popover-prefix: 'dk-popover';

.#{$popover-prefix} {
  @include reset-component();
  min-width: $popover-min-width;
  position: absolute;
  z-index: $zindex-popover;

  &-enter {
    opacity: 0;
  }

  &-enter-active {
    opacity: 1;
    transition: opacity 150ms ease-in;
  }

  &-exit {
    opacity: 1;
  }

  &-exit-active {
    opacity: 0;
    transition: opacity 150ms ease-out;
  }

  &-reference {
    display: inline-block;
  }

  &-inner {
    border-radius: $border-radius;
    background: $popover-bg;
    box-shadow: $popover-box-shadow;
    border-style: solid;
    border-width: 1px;
    border-color: $popover-border-color;
  }

  &-arrow,
  &-arrow::after {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: $popover-arrow-size;
  }

  &-arrow::after {
    content: '';
  }


  &-top,
  &-top-start,
  &-top-end {
    padding-bottom: $popover-distance;
  }

  &-right,
  &-right-start,
  &-right-end {
    padding-left: $popover-distance;
  }

  &-bottom,
  &-bottom-start,
  &-bottom-end {
    padding-top: $popover-distance;
  }

  &-left,
  &-left-start,
  &-left-end {
    padding-right: $popover-distance;
  }

  &-top &-arrow,
  &-top-start &-arrow,
  &-top-end &-arrow {
    bottom: $popover-distance - $popover-arrow-size + 1px;
    border-width: $popover-arrow-size $popover-arrow-size 0;
    border-top-color: $popover-border-color;

    &::after {
      bottom: 1.5px;
      margin-left: -$popover-arrow-size;
      border-top-color: $popover-arrow-color;
      border-bottom-width: 0;
    }
  }

  &-top &-arrow {
    left: 50%;
    margin-left: -$popover-arrow-size;
  }

  &-top-start &-arrow {
    left: 16px;
  }

  &-top-end &-arrow {
    right: 16px;
  }

  &-right &-arrow,
  &-right-start &-arrow,
  &-right-end &-arrow {
    left: $tooltip-distance - $popover-arrow-size + 1px;
    border-width: $popover-arrow-size $popover-arrow-size $popover-arrow-size 0;
    border-right-color: $popover-border-color;

    &:after {
      bottom: -$popover-arrow-size;
      left: 1px;
      border-right-color: $popover-arrow-color;
      border-left-width: 0;
    }
  }

  &-right &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-size;
  }

  &-right-start &-arrow {
    top: 8px;
  }

  &-right-end &-arrow {
    bottom: 8px;
  }

  &-left &-arrow,
  &-left-start &-arrow,
  &-left-end &-arrow {
    right: $tooltip-distance - $popover-arrow-size + 1px;
    border-width: $popover-arrow-size 0 $popover-arrow-size $popover-arrow-size;
    border-left-color: $popover-border-color;

    &::after {
      right: 1.5px;
      bottom: -$popover-arrow-size;
      margin-left: -$popover-arrow-size;
      border-right-width: 0;
      border-left-color: $popover-arrow-color;
    }
  }

  &-left &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-size;
  }

  &-left-start &-arrow {
    top: 8px;
  }

  &-left-end &-arrow {
    bottom: 8px;
  }

  &-bottom &-arrow,
  &-bottom-start &-arrow,
  &-bottom-end &-arrow {
    top: $tooltip-distance - $popover-arrow-size + 1px;
    border-width: 0 $popover-arrow-size $popover-arrow-size;
    border-bottom-color: $popover-border-color;

    &::after {
      top: 1.5px;
      margin-left: -$popover-arrow-size;
      border-top-width: 0;
      border-bottom-color: $popover-arrow-color;
    }
  }

  &-bottom &-arrow {
    left: 50%;
    margin-left: -$popover-arrow-size;
  }

  &-bottom-start &-arrow {
    left: 16px;
  }

  &-bottom-end &-arrow {
    right: 16px;
  }

  &-title {
    min-width: $popover-min-width;
    margin: 0;
    padding: ($popover-padding-x - 7px) $popover-padding-y;
    color: $gray-800;
    min-height: 32px;
    border-bottom: 1px solid $border-color;
    font-weight: $headings-font-weight;
  }

  &-content {
    padding: $popover-padding-x $popover-padding-y;
  }
}