@use 'variables' as *;
@use '@xui/theme-core' as core;

@mixin theme() {
  .x-popover {
    display: flex;
    position: relative;
    min-width: 100px;
    min-height: 48px;

    border-radius: $border-radius;
    border: 1px solid core.modifier-accent();

    @include core.fill(floating);
    @include core.elevate(high);

    color: $color;
    background-color: $background-color;

    &-content {
      overflow-y: auto;
      padding: 12px;
    }

    &-right {
      top: -20px;
      left: 16px;

      .x-popover-arrow {
        left: -0.5rem;
        top: 12px;

        border-top: 0.5rem solid transparent;
        border-right: 0.5rem solid core.modifier-accent();
        border-bottom: 0.5rem solid transparent;

        &::after {
          top: -8px;
          left: 1.5px;
          border-top: 0.5rem solid transparent;
          border-right: 0.5rem solid $background-color;
          border-bottom: 0.5rem solid transparent;
        }
      }
    }

    &-left {
      top: -20px;
      right: 16px;

      .x-popover-arrow {
        right: -0.5rem;
        top: 12px;

        border-top: 0.5rem solid transparent;
        border-left: 0.5rem solid core.modifier-accent();
        border-bottom: 0.5rem solid transparent;

        &::after {
          top: -8px;
          right: 1.5px;
          border-top: 0.5rem solid transparent;
          border-left: 0.5rem solid $background-color;
          border-bottom: 0.5rem solid transparent;
        }
      }
    }

    &-top {
      bottom: 16px;

      .x-popover-arrow {
        bottom: -0.5rem;
        left: calc(50% - 0.5rem);

        border-right: 0.5rem solid transparent;
        border-top: 0.5rem solid core.modifier-accent();
        border-left: 0.5rem solid transparent;

        &::after {
          bottom: 1.5px;
          left: -8px;
          border-right: 0.5rem solid transparent;
          border-top: 0.5rem solid $background-color;
          border-left: 0.5rem solid transparent;
        }
      }
    }

    &-bottom {
      top: 16px;

      .x-popover-arrow {
        top: -0.5rem;
        left: calc(50% - 0.5rem);

        border-right: 0.5rem solid transparent;
        border-bottom: 0.5rem solid core.modifier-accent();
        border-left: 0.5rem solid transparent;

        &::after {
          top: 1.5px;
          left: -8px;
          border-right: 0.5rem solid transparent;
          border-bottom: 0.5rem solid $background-color;
          border-left: 0.5rem solid transparent;
        }
      }
    }

    .x-popover-arrow {
      position: absolute;
      width: 0;
      height: 0;

      &::after {
        width: 0;
        height: 0;
        content: '';
        position: absolute;
      }
    }
  }
}