@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/radius';
@use '@mezzanine-ui/system/effect';
@use '@mezzanine-ui/system/z-index';
@use './overflow-tooltip' as *;

.#{$prefix} {
  z-index: z-index.get(popover);
  pointer-events: all;

  &__content {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: spacing.semantic-variable(gap, tight);
    height: fit-content;
    max-width: spacing.semantic-variable(size, container, narrow);
    padding: spacing.semantic-variable(padding, vertical, tiny)
      spacing.semantic-variable(padding, horizontal, tiny);
    border-radius: radius.variable(tiny);
    background-color: palette.semantic-variable('background', base);
    box-shadow: effect.variable(shadow, floating);
  }

  &__arrow {
    color: palette.semantic-variable('background', base);
  }
}

.#{$counterTagPrefix}.#{$counterTagPrefix}.#{$counterTagPrefix}--readonly:not(
    .#{$counterTagPrefix}--disabled
  ) {
  cursor: pointer;
}