@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-popover-arrow-size: 6px;
  --xzx-popover-radius: var(--xzx-br-base);
  --xzx-popover-action-width: 86px;
  --xzx-popover-action-height: 54px;
  --xzx-popover-action-font-size: var(--xzx-text-base);
  --xzx-popover-action-line-height: var(--xzx-text-base);
  --xzx-popover-action-icon-size: 20px;
  --xzx-popover-horizontal-action-height: 34px;
  --xzx-popover-horizontal-action-icon-size: 16px;
  --xzx-popover-light-text-color: var(--xzx-text-color);
  --xzx-popover-light-background: var(--xzx-background-2);
  --xzx-popover-light-action-disabled-text-color: var(--xzx-text-color-3);
  --xzx-popover-dark-text-color: var(--xzx-white);
  --xzx-popover-dark-background: #4a4a4a;
  --xzx-popover-dark-action-disabled-text-color: var(--xzx-text-color-2);
}

@include b(popover) {
  position: absolute;
  overflow: visible;
  background-color: transparent;
  transition: opacity 0.15s,
  transform 0.15s;

  &__wrapper {
    display: inline-block;
  }

  &__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: var(--xzx-popover-arrow-size);
  }

  &__content {
    overflow: hidden;
    border-radius: var(--xzx-popover-radius);

    &--horizontal {
      display: flex;
      width: max-content;

      .xzx-popover__action {
        flex: none;
        width: auto;
        height: var(--xzx-popover-horizontal-action-height);
        padding: 0 var(--xzx-padding-sm);

        &:last-child::after {
          display: none;
        }

        &-icon {
          margin-right: var(--xzx-padding-base);
          font-size: var(--xzx-popover-horizontal-action-icon-size);
        }
      }
    }
  }

  &__action {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: var(--xzx-popover-action-width);
    height: var(--xzx-popover-action-height);
    padding: 0 var(--xzx-padding-md);
    font-size: var(--xzx-popover-action-font-size);
    line-height: var(--xzx-popover-action-line-height);
    cursor: pointer;

    &:last-child {
      .xzx-popover__action-text::after {
        display: none;
      }
    }

    &-text {
      display: flex;
      flex: 1;
      align-items: center;
      //justify-content: center;
      height: 100%;
    }

    &-icon {
      margin-right: var(--xzx-padding-base);
      font-size: var(--xzx-popover-action-icon-size);
    }

    &--with-icon {
      .xzx-popover__action-text {
        justify-content: flex-start;
      }
    }
  }

  &[data-popper-placement^='top'] {
    .xzx-popover__arrow {
      bottom: 0;
      border-top-color: currentColor;
      border-bottom-width: 0;
      margin-bottom: calc(var(--xzx-popover-arrow-size) * -1);
    }
  }

  &[data-popper-placement='top'] {
    transform-origin: 50% 100%;

    .xzx-popover__arrow {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &[data-popper-placement='top-start'] {
    transform-origin: 0 100%;

    .xzx-popover__arrow {
      left: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement='top-end'] {
    transform-origin: 100% 100%;

    .xzx-popover__arrow {
      right: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement^='left'] {
    .xzx-popover__arrow {
      right: 0;
      border-right-width: 0;
      border-left-color: currentColor;
      margin-right: calc(var(--xzx-popover-arrow-size) * -1);
    }
  }

  &[data-popper-placement='left'] {
    transform-origin: 100% 50%;

    .xzx-popover__arrow {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &[data-popper-placement='left-start'] {
    transform-origin: 100% 0;

    .xzx-popover__arrow {
      top: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement='left-end'] {
    transform-origin: 100% 100%;

    .xzx-popover__arrow {
      bottom: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement^='right'] {
    .xzx-popover__arrow {
      left: 0;
      border-right-color: currentColor;
      border-left-width: 0;
      margin-left: calc(var(--xzx-popover-arrow-size) * -1);
    }
  }

  &[data-popper-placement='right'] {
    transform-origin: 0 50%;

    .xzx-popover__arrow {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &[data-popper-placement='right-start'] {
    transform-origin: 0 0;

    .xzx-popover__arrow {
      top: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement='right-end'] {
    transform-origin: 0 100%;

    .xzx-popover__arrow {
      bottom: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement^='bottom'] {
    .xzx-popover__arrow {
      top: 0;
      border-top-width: 0;
      border-bottom-color: currentColor;
      margin-top: calc(var(--xzx-popover-arrow-size) * -1);
    }
  }

  &[data-popper-placement='bottom'] {
    transform-origin: 50% 0;

    .xzx-popover__arrow {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &[data-popper-placement='bottom-start'] {
    transform-origin: 0 0;

    .xzx-popover__arrow {
      left: var(--xzx-padding-md);
    }
  }

  &[data-popper-placement='bottom-end'] {
    transform-origin: 100% 0;

    .xzx-popover__arrow {
      right: var(--xzx-padding-md);
    }
  }

  &--light {
    color: var(--xzx-popover-light-text-color);

    .xzx-popover__content {
      background: var(--xzx-popover-light-background);
      box-shadow: var(--xzx-shadow-base);
    }

    .xzx-popover__arrow {
      color: var(--xzx-popover-light-background);
    }

    .xzx-popover__action {
      &:active {
        background-color: var(--xzx-active-color);
      }

      &--disabled {
        color: var(--xzx-popover-light-action-disabled-text-color);
        cursor: not-allowed;

        &:active {
          background-color: transparent;
        }
      }
    }
  }

  &--dark {
    color: var(--xzx-popover-dark-text-color);

    .xzx-popover__content {
      background: var(--xzx-popover-dark-background);
    }

    .xzx-popover__arrow {
      color: var(--xzx-popover-dark-background);
    }

    .xzx-popover__action {
      &:active {
        background-color: rgba(0, 0, 0, 0.2);
      }

      &--disabled {
        color: var(--xzx-popover-dark-action-disabled-text-color);

        &:active {
          background-color: transparent;
        }
      }
    }

    .xzx-popover__action-text {
      &::after {
        border-color: var(--xzx-gray-7);
      }
    }
  }

  &-zoom-enter-from,
  &-zoom-leave-active {
    transform: scale(0.8);
    opacity: 0;
  }

  &-zoom-enter-active {
    transition-timing-function: var(--xzx-ease-out);
  }

  &-zoom-leave-active {
    transition-timing-function: var(--xzx-ease-in);
  }
}