@import './theme/default';
@import './theme/font';
@import './mixins/pop-arrow';

.zent-pop-v2 {
  @include font-normal;
  @include theme-color(background-color, stroke, 9);
  @include theme-shadow(layer);

  border-radius: 4px;
  z-index: 2000;

  .zent-pop-v2-inner,
  .zent-pop-v2-header {
    @include theme-color(background-color, stroke, 9);
    @include theme-color(color, stroke, 1);
    position: relative;
    border-radius: 4px;
    padding: 16px;
    z-index: 2;
  }

  .zent-pop-v2-header {
    @include font-large;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 0;
    font-weight: $font-weight-bold;
  }

  .zent-pop-v2-buttons {
    text-align: right;
    vertical-align: top;
    margin-top: 16px;

    .zent-btn + .zent-btn {
      margin-left: 8px;
    }
  }

  .zent-pop-v2-arrow {
    @include theme-color(background-color, stroke, 9);
    @include theme-shadow(layer);

    position: absolute;
    z-index: 1;
    width: var(--CSS_ARROW_SIZE);
    height: var(--CSS_ARROW_SIZE);
    overflow: hidden;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    width: var(--CSS_ARROW_COVER_SIZE);
    height: var(--CSS_ARROW_COVER_SIZE);
  }

  &.zent-popover-v2-position,
  &.zent-popover-v2-position-arrow {
    @include pop-arrow('pop-v2');
  }
}