$content-arrow-size: 8px;

.popover {
  :where(&) {
    position: relative;
    display: inline-block;
  }

  &#{&}--fluid {
    display: block;
    width: 100%;
  }
}

.popover-content {
  &__content {
    border: var(--wds-popover-border-width, var(--wds-border-width-none, 0)) solid var(--wds-popover-border-fill, var(--wds-color-black-100-transparent-0, transparent));
    border-radius: var(--wds-popover-border-radius, var(--wds-border-radius-400, 8px));
    box-sizing: border-box;
    box-shadow: var(--wds-shadow-surface-overlay, var(--wsr-shadow30, 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12)));
    font-size: var(--wds-font-size-body-small, 14px);
    line-height: var(--wds-font-line-height-body-small, 18px);
  }

  &__content--skin-light {
    color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    background: var(--wds-popover-fill, var(--wds-color-fill-surface-overlay, white));
  }

  &__content--skin-dark {
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    background: var(--wds-color-fill-surface-overlay-dark, var(--wsr-color-D10, #000624));
  }

  @supports (backdrop-filter: blur(20px)) {
    &__content {
      backdrop-filter: blur(var(--wds-background-blur-surface-overlay, 0px));
    }
  }

  &--placement-right &__content--has-arrow,
  &--placement-right-start &__content--has-arrow,
  &--placement-right-end &__content--has-arrow {
    margin-left: calc(#{$content-arrow-size} - 2px);
  }

  &--placement-left &__content--has-arrow,
  &--placement-left-start &__content--has-arrow,
  &--placement-left-end &__content--has-arrow {
    margin-right: calc(#{$content-arrow-size} - 2px);
  }

  &--placement-top &__content--has-arrow,
  &--placement-top-start &__content--has-arrow,
  &--placement-top-end &__content--has-arrow {
    margin-bottom: calc(#{$content-arrow-size} - 2px);
  }

  &--placement-bottom &__content--has-arrow,
  &--placement-bottom-start &__content--has-arrow,
  &--placement-bottom-end &__content--has-arrow {
    margin-top: calc(#{$content-arrow-size} - 2px);
  }

  &__arrow {
    position: absolute;
    width: $content-arrow-size;
    height: $content-arrow-size;
    background: transparent;
    box-sizing: border-box;
    transform: rotateZ(45deg);
    border-style: solid;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
    border-width: calc(#{$content-arrow-size} / 2);
    margin: 0;
  }

  &__arrow--skin-light {
    border-color: transparent var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)) var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)) transparent;
  }

  &__arrow--skin-dark {
    border-color: transparent var(--wds-color-fill-surface-overlay-dark, var(--wsr-color-D10, #000624)) var(--wds-color-fill-surface-overlay-dark, var(--wsr-color-D10, #000624)) transparent;
  }

  &--placement-right &__arrow,
  &--placement-right-start &__arrow,
  &--placement-right-end &__arrow {
    transform: rotateZ(135deg);
    left: calc(#{$content-arrow-size} / 2 - 2px);
    margin-top: $content-arrow-size;
    margin-bottom: $content-arrow-size;
  }

  &--placement-left &__arrow,
  &--placement-left-start &__arrow,
  &--placement-left-end &__arrow {
    transform: rotateZ(-45deg);
    right: calc(#{$content-arrow-size} / 2 - 2px);
    margin-top: $content-arrow-size;
    margin-bottom: $content-arrow-size;
  }

  &--placement-top &__arrow,
  &--placement-top-start &__arrow,
  &--placement-top-end &__arrow {
    transform: rotateZ(45deg);
    bottom: calc(#{$content-arrow-size} / 2 - 2px);
    margin-left: $content-arrow-size;
    margin-right: $content-arrow-size;
  }

  &--placement-bottom &__arrow,
  &--placement-bottom-start &__arrow,
  &--placement-bottom-end &__arrow {
    transform: rotateZ(-135deg);
    top: calc(#{$content-arrow-size} / 2 - 2px);
    margin-left: $content-arrow-size;
    margin-right: $content-arrow-size;
  }

  &__animation-enter {
    opacity: 0;
    transform: scale(0.9);
  }

  &__animation-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1), transform 150ms cubic-bezier(0, 0, 0.2, 1);
  }

  &__animation-exit {
    opacity: 1;
    transform: scale(1);
  }

  &__animation-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 100ms cubic-bezier(0.4, 0, 1, 1), transform 100ms cubic-bezier(0.4, 0, 1, 1);
  }
}