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

@include b(popover) {
  // @include set-component-css-var('popover', $popover);

  &.#{$namespace}-popper {
    background: getCssVar('popover-bg-color');
    min-width: 160px;
    border-radius: getCssVar('border-radius-md');
    border: 1px solid getCssVar('color-neutral-2');
    padding: 16px;
    z-index: getCssVar('index-popper');
    color: getCssVar('color-neutral-9');
    font-size: 14px;
    box-shadow: getCssVar('box-shadow-lv2');
    // word-break: break-all;

    @include m(plain) {
      padding: 24px;
    }

    @include e(title) {
      color: getCssVar('color-neutral-9');
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    @include e(content) {
      font-size: 14px;
    }

    @include e(reference) {
      &:focus:not(.focusing),
      &:focus:hover {
        outline-width: 0;
      }
    }

    &:focus:active,
    &:focus {
      outline-width: 0;
    }
  }
}