@use "variables";

%triangle-base {
  width: 17px;
  height: 17px;
  position: absolute;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: variables.$white;
    transform: rotate(45deg);
    box-shadow: 0px 1px 4px #33333333;
  }
}

@mixin triangle-bottom {
  @extend %triangle-base;
  left: 50%;
  top: 100%;
  transform: translateX(-8px);

  &::after {
    top: -6px;
    left: 3px;
  }
}

@mixin triangle-top {
  @extend %triangle-base;
  left: 50%;
  top: -17px;
  transform: translateX(-8px);

  &::after {
    top: 11px;
    left: 3px;
  }
}

@mixin triangle-left {
  @extend %triangle-base;
  left: -17px;
  top: 50%;
  transform: translateY(-8px);

  &::after {
    top: 2px;
    left: 11px;
  }
}

@mixin triangle-left-top {
  @extend %triangle-base;
  left: -17px;
  top: 32px;
  transform: translateY(-8px);

  &::after {
    top: 2px;
    left: 11px;
  }
}

@mixin triangle-right {
  @extend %triangle-base;
  left: 100%;
  top: 50%;
  transform: translateY(-8px);

  &::after {
    top: 2px;
    left: -6px;
  }
}

@mixin triangle-right-top {
  @extend %triangle-base;
  left: 100%;
  top: 32px;
  transform: translateY(-8px);

  &::after {
    top: 2px;
    left: -6px;
  }
}

.fwe-popover-container {
  position: relative;
  display: inline-block;
  min-width: max-content;
}

@mixin popover-legend {
  display: table;
  padding: variables.$spacer;
  line-height: variables.$spacer * 1.5;
}

@mixin popover-legend-content {
  display: table-row;

  dt {
    display: table-cell;
    margin: 0;
    padding-right: variables.$spacer * 0.5;
  }

  dd {
    display: table-cell;
    margin: 0;
  }
}

.fwe-triangle {
  &.fwe-triangle-top {
    @include triangle-top();
  }

  &.fwe-triangle-bottom {
    @include triangle-bottom();
  }

  &.fwe-triangle-left {
    @include triangle-left();
  }

  &.fwe-triangle-right {
    @include triangle-right();
  }
}

@mixin popover-menu {
  font-size: variables.$font-size-base;
  line-height: 1.5rem;
  padding: 16px;

  button {
    all: unset;
    cursor: pointer;
    border-bottom: none;
    min-height: variables.$spacer * 2.25;
    padding: 0;
    height: 36px;
    width: 100%;
    display: flex;
    align-items: center;
    color: variables.$text;

    .fwe-svg-icon {
      margin-right: 8px;
      margin-left: 8px;
    }

    i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      height: variables.$spacer * 1.5;
      width: variables.$spacer * 2;
      margin-right: 0px;

      &::before {
        display: inline-flex;
      }
    }

    span {
      display: inline-flex;
      margin-right: 8px;
    }

    &:hover {
      background-color: #3333331a;
    }

    &:active {
      background-color: #33333333;
    }
  }
}

@mixin popover-content {
  // allow natural content sizing
  width: auto;
  min-width: max-content;
  max-width: none;

  // default padding for content
  padding: variables.$spacer;
}

.fwe-popover {
  background-color: variables.$white;
  box-shadow: 0px 1px 4px #33333333;
  border-radius: variables.$control-border-radius;
  padding: variables.$spacer * 0.5;
  font-size: variables.$font-size-md;
  line-height: 1rem;

  &--legend {
    @include popover-legend();

    .fwe-popover-legend-content {
      @include popover-legend-content();
    }
  }

  &--menu {
    @include popover-menu();
  }

  &--content {
    @include popover-content();
  }
}

.fwe-popover-menu-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: block;
  cursor: pointer;

  &:hover {
    color: variables.$hero;
  }
}