@use '../variables' as variables;

.popover {
  --popover-bg: #{variables.$popover-bg};
  --popover-border-color: #{variables.$popover-border-color};
  --popover-border-width: #{variables.$popover-border-width};
  --popover-border: var(--popover-border-width) solid var(--popover-border-color);
  --popover-border-radius-xs: #{variables.$popover-border-radius-xs};
  --popover-border-radius-sm: #{variables.$popover-border-radius-sm};
  --popover-border-radius: #{variables.$popover-border-radius};
  --popover-border-radius-lg: #{variables.$popover-border-radius-lg};
  --popover-border-radius-xl: #{variables.$popover-border-radius-xl};
  --popover-padding: #{variables.$popover-padding};
  --popover-shadow: #{variables.$popover-shadow};
  --popover-width: #{variables.$popover-width};
  --popover-arrow-size: #{variables.$popover-arrow-size};

  background: var(--popover-bg);
  border: var(--popover-border);
  border-radius: var(--popover-border-radius);
  box-shadow: var(--popover-shadow);
  padding: var(--popover-padding);
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  width: var(--popover-width);

  [data-popper-arrow] {
    background-color: var(--popover-bg);
    text-align: initial;

    &,
    &::before {
      height: var(--popover-arrow-size);
      position: absolute;
      width: var(--popover-arrow-size);
    }

    &::before {
      content: '';
      transform: rotate(45deg);
      transform-origin: center center;
    }
  }

  &[data-popper-placement*='top'] [data-popper-arrow] {
    margin-bottom: calc(var(--popover-arrow-size) / -2 - var(--popover-border-width));
    bottom: 0;

    &::before {
      border-bottom: var(--popover-border);
      border-right: var(--popover-border);
    }
  }

  &[data-popper-placement*='right'] [data-popper-arrow] {
    margin-left: calc(var(--popover-arrow-size) / -2 - var(--popover-border-width));
    left: 0;

    &::before {
      border-bottom: var(--popover-border);
      border-left: var(--popover-border);
    }
  }

  &[data-popper-placement*='bottom'] [data-popper-arrow] {
    margin-top: calc(var(--popover-arrow-size) / -2 - var(--popover-border-width));
    top: 0;

    &::before {
      border-left: var(--popover-border);
      border-top: var(--popover-border);
    }
  }

  &[data-popper-placement*='left'] [data-popper-arrow] {
    margin-right: calc(var(--popover-arrow-size) / -2 - var(--popover-border-width));
    right: 0;

    &::before {
      border-right: var(--popover-border);
      border-top: var(--popover-border);
    }
  }
}

.popover-xl {
  border-radius: var(--popover-border-radius-xl);
}

.popover-lg {
  border-radius: var(--popover-border-radius-lg);
}

.popover-sm {
  border-radius: var(--popover-border-radius-sm);
}

.popover-xs {
  border-radius: var(--popover-border-radius-xs);
}