// introducing this here instead of importing the the vue-popper stylesheet
// for more customizability. Also, namespacing the css with tf-popper so that
// we are sure to avoid any conflicts with how Element might be leveraging popper.

$popper-radius: 2px;
$arrow-outer-size: 8px;
$arrow-inner-size: 6px;
$popper-bg-color: $tf-extra-light-gray-2;
$popper-border-color: $tf-medium-gray;
$popper-text-color: $tf-dark-gray;

.tf-popper {
  display: inline-block;
  position: absolute;
  z-index: 200000;
  width: auto;
  padding: $popper-radius;
  box-shadow: rgba($tf-black, .2) 0 0 $arrow-inner-size 0;
  background-color: $popper-bg-color;
  color: $popper-text-color;
  border: 1px $popper-border-color solid;
  border-radius: $popper-radius;
  text-align: center;
  font-size: 14px;
  font-weight: normal;

  .popper__arrow {
    position: absolute;
    width: 0;
    height: 0;
    margin: $arrow-inner-size;
    border-style: solid;

    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
    }
  }

  &[x-placement^='top'] {
    margin-bottom: $arrow-inner-size;

    .popper__arrow {
      left: calc(50% - #{$arrow-outer-size});
      bottom: -$arrow-outer-size;
      margin-top: 0;
      margin-bottom: 0;
      border-width: $arrow-outer-size $arrow-outer-size 0;
      border-color: $popper-border-color transparent transparent;

      &::after {
        left: calc(50% - #{$arrow-inner-size});
        bottom: $popper-radius;
        border-width: $arrow-inner-size $arrow-inner-size 0;
        border-color: $popper-bg-color transparent transparent;
      }
    }
  }

  &[x-placement^='bottom'] {
    margin-top: $arrow-inner-size;

    .popper__arrow {
      left: calc(50% - #{$arrow-outer-size});
      top: -$arrow-outer-size;
      margin-top: 0;
      margin-bottom: 0;
      border-width: 0 $arrow-outer-size $arrow-outer-size;
      border-color: transparent transparent $popper-border-color;

      &::after {
        top: $popper-radius;
        left: calc(50% - #{$arrow-inner-size});
        border-width: 0 $arrow-inner-size $arrow-inner-size;
        border-color: transparent transparent $popper-bg-color;
      }
    }
  }

  &[x-placement^='right'] {
    margin-left: $arrow-inner-size;

    .popper__arrow {
      top: calc(50% - #{$arrow-outer-size});
      left: -$arrow-outer-size;
      margin-left: 0;
      margin-right: 0;
      border-width: $arrow-outer-size $arrow-outer-size $arrow-outer-size 0;
      border-color: transparent $popper-border-color transparent transparent;

      &::after {
        top: calc(50% - #{$arrow-inner-size});
        left: $popper-radius;
        border-width: $arrow-inner-size $arrow-inner-size $arrow-inner-size 0;
        border-color: transparent $popper-bg-color transparent transparent;
      }
    }
  }

  &[x-placement^='left'] {
    margin-right: $arrow-inner-size;

    .popper__arrow {
      right: -$arrow-outer-size;
      top: calc(50% - #{$arrow-outer-size});
      margin-left: 0;
      margin-right: 0;
      border-width: $arrow-outer-size 0 $arrow-outer-size $arrow-outer-size;
      border-color: transparent transparent transparent $popper-border-color;

      &::after {
        right: $popper-radius;
        top: calc(50% - #{$arrow-inner-size});
        border-width: $arrow-inner-size 0 $arrow-inner-size $arrow-inner-size;
        border-color: transparent transparent transparent $popper-bg-color;
      }
    }
  }
}