@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/layers";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/responsive";
@import "~@cultureamp/kaizen-component-library/styles/type";
@import "~@cultureamp/kaizen-component-library/components/Button/styles";

/* The bordered part of the triangle */
$default-size: 8px;
$large: 450px;

// Suggestion: with this implementation, the anchor point of the popover is at the base of the triangle. But,
// we would ideally want it at the tip of the triangle. Otherwise, when using the popover, the consumer needs to manually
// add something like a `margin-top: 8px` to get the popover properly positioned.
// I didn't update this, as I didn't want to introduce a breaking change.
@mixin arrow($background-color, $border-color, $size: $default-size) {
  position: absolute;
  top: 100%;
  left: 50%;

  &::before,
  &::after {
    content: "";
    position: absolute;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    top: 0;
    left: 0;
    margin-left: -$size;
  }

  &::before {
    border-top: $size solid $border-color;
  }

  /* The white fill of the triangle */
  &::after {
    border-top: $size solid $background-color;
    margin-top: -1px;
    z-index: 1;
  }
}

.root {
  width: 220px;
  position: absolute;
  left: 50%;
  // also see the component file under getRootStyle, which will transform the element
}

%box {
  background: #fff;
  border: 1px solid $kz-color-wisteria-200;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
  border-radius: $ca-border-radius;
  color: $kz-color-wisteria-800;
  text-align: left;
}

.defaultBox {
  @extend %box;
}

.defaultArrow {
  @include arrow(#fff, $kz-color-wisteria-200);
}

.informativeBox {
  @extend %box;
  background: $kz-color-cluny-100;
  border-color: $kz-color-cluny-200;
}

.informativeArrow {
  @include arrow($kz-color-cluny-100, $kz-color-cluny-200);
}

.positiveBox {
  @extend %box;
  background: $kz-color-seedling-100;
  border-color: $kz-color-seedling-200;
}

.positiveArrow {
  @include arrow($kz-color-seedling-100, $kz-color-seedling-200);
}

.negativeBox {
  @extend %box;
  background: $kz-color-coral-100;
  border-color: $kz-color-coral-200;
}

.negativeArrow {
  @include arrow($kz-color-coral-100, $kz-color-coral-200);
}

.cautionaryBox {
  @extend %box;
  background: $kz-color-yuzu-100;
  border-color: $kz-color-yuzu-400;
}

.cautionaryArrow {
  @include arrow($kz-color-yuzu-100, $kz-color-yuzu-400);
}

.header {
  @include ca-type-ideal-label;
  @include ca-inherit-baseline;
  padding: ($ca-grid / 4) ($ca-grid / 2);
  border-bottom: 1px solid $ca-border-color;
  margin-bottom: $ca-grid / 4;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.container {
  @include ca-inherit-baseline;
  @include ca-type-ideal-notification;
  padding: ($ca-grid / 6) ($ca-grid / 2) ($ca-grid);
  white-space: pre-line;
}

.icon {
  display: inherit;
  margin-right: $ca-grid / 4;
}

.informativeIcon {
  color: $kz-color-cluny-500;
}

.positiveIcon {
  color: $kz-color-seedling-400;
}

.negativeIcon {
  color: $kz-color-coral-500;
}

.cautionaryIcon {
  color: $kz-color-yuzu-500;
}

.close {
  @include button-reset;
  margin-left: auto;
  display: inherit;
  color: add-alpha(#000, 50%);
}

.arrowSideBottom {
  // This is just an empty class to satisfy Elm's case statement
  // (we were in a rush and the linter wouldn't let an empty class through.)
  // Can be refactored out!
  visibility: visible;
}

.arrowSideTop {
  top: initial;
  bottom: 100%;
  margin-top: 1px;
  // Also see getArrowStyle in the component file, which will rotate the arrow 180 degrees
}

.arrowPositionCenter {
  // This is just an empty class to satisfy Elm's case statement
  // (we were in a rush and the linter wouldn't let an empty class through.)
  // Can be refactored out!
  visibility: visible;
}

.arrowPositionStart {
  left: $ca-grid;
  right: auto;
}

.arrowPositionEnd {
  right: $ca-grid;
  left: auto;
}

.large {
  width: auto;
  max-width: $large;
}

.singleLine {
  text-overflow: ellipsis;
  /* white-space and overflow are required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}