@use '~@moda/om';

.Popover {
  $self: &;
  $caret-size: om.space(2);
  $border-width: calc(1rem / 16);
  $offset: om.space(2);

  position: relative;

  &__content {
    position: absolute;
    background-color: om.color('snow');
    border: $border-width solid om.color(elephant);
    z-index: 1;

    // Fills space of offset so hover works without issue
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: -($offset);
      width: 100%;
      height: $offset;
    }
  }

  &__box--opening {
    @keyframes fade-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    animation: fade-in 0.75s;
  }

  &__box--closing {
    @keyframes fade-out {
      to {
        opacity: 0;
      }
    }

    animation: fade-out 1s;
  }

  &--anchor-topLeft {
    #{$self}__content {
      top: 100%;
      bottom: auto;
      left: 0;
      right: auto;
      transform: translateY($offset);
    }
  }

  &--anchor-topCenter {
    #{$self}__content {
      top: 100%;
      bottom: auto;
      left: 50%;
      right: auto;
      transform: translate(-50%, $offset);
    }
  }

  &--anchor-topRight {
    #{$self}__content {
      top: 100%;
      bottom: auto;
      left: auto;
      right: 0;
      transform: translateY($offset);
    }
  }

  &--anchor-bottomLeft {
    #{$self}__content {
      top: auto;
      bottom: 100%;
      left: 0;
      right: auto;
      transform: translateY(-#{$offset});
    }
  }

  &--anchor-bottomCenter {
    #{$self}__content {
      top: auto;
      bottom: 100%;
      left: 50%;
      right: auto;
      transform: translate(-50%, -#{$offset});
    }
  }

  &--anchor-bottomRight {
    #{$self}__content {
      top: auto;
      bottom: 100%;
      left: auto;
      right: 0;
      transform: translateY(-#{$offset});
    }
  }

  &--anchor-topLeft,
  &--anchor-topCenter,
  &--anchor-topRight {
    #{$self}__caret {
      top: 100%;
      &:after,
      &:before {
        top: auto;
        bottom: -($border-width + $offset);
        border-top: none;
        border-bottom: $caret-size solid om.color('snow');
      }

      &:before {
        border-bottom: $caret-size solid om.color(ink);
      }
    }
  }

  &--anchor-bottomLeft,
  &--anchor-bottomCenter,
  &--anchor-bottomRight {
    #{$self}__caret {
      top: 0;
      &:after,
      &:before {
        top: -($border-width + $offset);
        bottom: auto;
        border-top: $caret-size solid om.color('snow');
        border-bottom: none;
      }

      &:before {
        border-top: $caret-size solid om.color(ink);
      }
    }
  }

  &__trigger {
    position: relative;
    display: block;
  }

  &__caret {
    width: 100%;
    position: absolute;
    z-index: 2;

    &:after,
    &:before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-left: $caret-size solid transparent;
      border-right: $caret-size solid transparent;
    }
  }
}