@import '../custom.less';

@popover-prefix-cls: ~'@{css-prefix}popover';
@popper-prefix-cls: ~'@{css-prefix}popper';

.@{popover-prefix-cls}.@{popper-prefix-cls} {
  @apply absolute;
  @apply bg-color-bg-1;
  @apply text-color-icon-primary;
  @apply rounded;
  @apply border-none;
  @apply py-3 px-4;
  @apply ~'z-[2000]';
  @apply ~'leading-5.5';
  @apply text-justify;
  @apply text-sm;
  @apply shadow-md;
  @apply break-all;

  .popper__arrow,
  .popper__arrow::after {
    @apply absolute;
    @apply block;
    @apply w-0;
    @apply h-0;
    @apply border-transparent;
    @apply border-solid;
  }

  .popper__arrow,
  .@{popper-prefix-cls} .popper__arrow {
    @apply border-4;
  }

  .popper__arrow::after {
    @apply ~"content-['']";
  }

  &[x-placement^='top'] {
    @apply mb-3;

    .popper__arrow {
      @apply -bottom-1;
      @apply ~'left-1/2';
      margin-right: 3px;
      @apply border-solid;
      @apply border-b-color-bg-1;
      @apply border-l-color-bg-1;
      @apply rounded-bl-sm;
      transform: rotate(315deg);
    }
  }

  &[x-placement^='bottom'] {
    @apply mt-3;

    .popper__arrow {
      @apply -top-1;
      @apply ~'left-1/2';
      margin-right: 3px;
      @apply border-solid;
      @apply border-b-color-bg-1;
      @apply border-l-color-bg-1;
      @apply rounded-bl-sm;
      transform: rotate(135deg);
    }
  }

  &[x-placement^='right'] {
    @apply ml-3;

    .popper__arrow {
      @apply ~'top-1/2';
      @apply -left-1;
      margin-bottom: 3px;
      @apply border-solid;
      @apply border-b-color-bg-1;
      @apply border-l-color-bg-1;
      @apply rounded-bl-sm;
      @apply rotate-45;
    }
  }

  &[x-placement^='left'] {
    @apply mr-3;

    .popper__arrow {
      @apply ~'top-1/2';
      @apply -right-1;
      margin-bottom: 3px;
      @apply border-solid;
      @apply border-b-color-bg-1;
      @apply border-l-color-bg-1;
      @apply rounded-bl-sm;
      transform: rotate(225deg);
    }
  }

  .@{popover-prefix-cls}__plain {
    @apply ~'py-4.5' px-5;
  }

  .@{popover-prefix-cls}__title {
    @apply text-color-text-primary;
    @apply text-sm;
    @apply leading-none;
    @apply mb-2;
  }

  &:focus,
  &:focus:active,
  .@{popover-prefix-cls}__reference:focus:hover,
  .@{popover-prefix-cls}__reference:focus:not(.focusing) {
    @apply outline-0;
  }
}

.@{popover-prefix-cls} {
  &__reference {
    @apply inline-block;
  }
}
