@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use '../../styles/mixins' as popoverMixins;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

$popover-arrow-size: 20px;
$popover-border-size: 10px;
$popover-max-width: 276px;

@include compatMixins.sky-default-overrides('.sky-popover-container') {
  --sky-override-popover-background-color: #{$sky-color-white};
  --sky-override-popover-max-width: #{$popover-max-width};
  --sky-override-popover-with-header-top-padding: 2px;
}

@include compatMixins.sky-modern-overrides('.sky-popover-container') {
  --sky-override-popover-accent-border-width: var(--modern-size-6);
  --sky-override-popover-header-bottom-margin: var(--modern-space-lg);
  --sky-override-popover-with-header-top-padding: 2px;
}

.sky-popover-container {
  position: fixed;
  min-width: $popover-max-width;
  max-width: var(
    --sky-override-popover-max-width,
    calc(
      min(var(--sky-size-max_width-overlay_message)) +
        calc(var(--sky-space-inset-balanced-l) * 2)
    )
  );

  &.sky-popover-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none !important;

    * {
      pointer-events: none !important;
    }
  }

  &.sky-popover-static {
    .sky-popover-arrow {
      position: absolute;
    }
  }

  &:focus {
    outline: none;
  }

  @media (max-width: $popover-max-width) {
    max-width: 100%;
    min-width: auto;
  }
}

.sky-popover {
  background-color: var(
    --sky-override-popover-background-color,
    var(--sky-color-background-container-base)
  );
}

.sky-popover-header {
  padding-bottom: 0;

  & + .sky-popover-body {
    // this can be removed entirely when we drop modern and default; the l spacing is set by the padding even class
    padding-top: var(
      --sky-override-popover-with-header-top-padding,
      var(--sky-space-inset-balanced-l)
    );
  }
}

.sky-popover-title {
  margin: 0;
}

.sky-popover-arrow {
  display: inline-block;
  position: absolute;
  background-color: $sky-highlight-color-info;
}

.sky-popover-placement-above {
  padding-bottom: $popover-border-size;

  .sky-popover {
    border-bottom: $popover-border-size solid $sky-highlight-color-info;
  }

  .sky-popover-arrow {
    width: $popover-arrow-size * 1.5;
    height: $popover-arrow-size * 0.75;
    clip-path: polygon(0 0, 50% 95%, 100% 0);
  }

  &.sky-popover-danger {
    .sky-popover {
      border-bottom-color: $sky-highlight-color-danger;
    }

    .sky-popover-arrow {
      background-color: $sky-highlight-color-danger;
    }
  }
}

.sky-popover-placement-below {
  padding-top: $popover-border-size;

  .sky-popover {
    border-top: $popover-border-size solid $sky-highlight-color-info;
  }

  .sky-popover-arrow {
    width: $popover-arrow-size * 1.5;
    height: $popover-arrow-size * 0.75;
    clip-path: polygon(50% 5%, 0 100%, 100% 100%);
  }

  &.sky-popover-danger {
    .sky-popover {
      border-top-color: $sky-highlight-color-danger;
    }

    .sky-popover-arrow {
      background-color: $sky-highlight-color-danger;
    }
  }
}

.sky-popover-placement-right {
  padding-left: $popover-border-size;

  .sky-popover {
    border-left: $popover-border-size solid $sky-highlight-color-info;
  }

  .sky-popover-arrow {
    width: $popover-arrow-size * 0.75;
    height: $popover-arrow-size * 1.5;
    clip-path: polygon(5% 50%, 100% 100%, 100% 0);
    background-color: $sky-highlight-color-info;
  }

  &.sky-popover-danger {
    .sky-popover {
      border-left-color: $sky-highlight-color-danger;
    }

    .sky-popover-arrow {
      background-color: $sky-highlight-color-danger;
    }
  }
}

.sky-popover-placement-left {
  padding-right: $popover-border-size;

  .sky-popover {
    border-right: $popover-border-size solid $sky-highlight-color-info;
  }

  .sky-popover-arrow {
    width: $popover-arrow-size * 0.75;
    height: $popover-arrow-size * 1.5;
    clip-path: polygon(0 0, 0 100%, 95% 50%);
    background-color: $sky-highlight-color-info;
  }

  &.sky-popover-danger {
    .sky-popover {
      border-right-color: $sky-highlight-color-danger;
    }

    .sky-popover-arrow {
      background-color: $sky-highlight-color-danger;
    }
  }
}

.sky-popover-max-height {
  .sky-popover {
    @include popoverMixins.popoverMaxHeight();
  }
}

@include mixins.sky-theme-modern {
  .sky-popover {
    border-radius: var(--sky-border-radius-s);
  }

  .sky-popover-header {
    padding: var(
      --sky-override-popover-heading-padding,
      var(--sky-space-inset-bottomless-top-l)
        var(--sky-space-inset-bottomless-right-l)
        var(--sky-space-inset-bottomless-bottom-l)
        var(--sky-space-inset-bottomless-left-l)
    );
    margin-bottom: var(--sky-override-popover-header-bottom-margin, 0);
  }

  .sky-popover-arrow {
    background-color: var(--sky-color-border-info);
  }

  .sky-popover-danger {
    .sky-popover-arrow {
      background-color: var(--sky-color-border-danger);
    }
  }

  .sky-popover-placement-above {
    padding-bottom: $popover-border-size;

    .sky-popover {
      border-bottom: var(
          --sky-override-popover-accent-border-width,
          var(--sky-border-width-accent)
        )
        var(--sky-border-style-accent) var(--sky-color-border-info);
    }

    .sky-popover-arrow {
      clip-path: polygon(0 0, 45% 88%, 50% 92%, 55% 88%, 100% 0);
    }

    &.sky-popover-danger {
      .sky-popover {
        border-bottom-color: var(--sky-color-border-danger);
      }
    }
  }

  .sky-popover-placement-below {
    padding-top: $popover-border-size;

    .sky-popover {
      border-top: var(
          --sky-override-popover-accent-border-width,
          var(--sky-border-width-accent)
        )
        var(--sky-border-style-accent) var(--sky-color-border-info);
    }

    .sky-popover-arrow {
      clip-path: polygon(0 100%, 45% 12%, 50% 8%, 55% 12%, 100% 100%);
    }

    &.sky-popover-danger {
      .sky-popover {
        border-top-color: var(--sky-color-border-danger);
      }
    }
  }

  .sky-popover-placement-right {
    padding-left: $popover-border-size;

    .sky-popover {
      border-left: var(
          --sky-override-popover-accent-border-width,
          var(--sky-border-width-accent)
        )
        var(--sky-border-style-accent) var(--sky-color-border-info);
    }

    .sky-popover-arrow {
      clip-path: polygon(100% 0, 12% 45%, 8% 50%, 12% 55%, 100% 100%);
    }

    &.sky-popover-danger {
      .sky-popover {
        border-left-color: var(--sky-color-border-danger);
      }
    }
  }

  .sky-popover-placement-left {
    padding-right: $popover-border-size;

    .sky-popover {
      border-right: var(
          --sky-override-popover-accent-border-width,
          var(--sky-border-width-accent)
        )
        var(--sky-border-style-accent) var(--sky-color-border-info);
    }

    .sky-popover-arrow {
      clip-path: polygon(0 0, 88% 45%, 92% 50%, 88% 55%, 0 100%);
    }

    &.sky-popover-danger {
      .sky-popover {
        border-right-color: var(--sky-color-border-danger);
      }
    }
  }
}
