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

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

  border-radius: 2px;
  box-shadow: $shadow-spec-layer;
  z-index: 2000;

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

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

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

  .zent-pop-buttons {
    text-align: right;
    vertical-align: top;

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

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

    position: absolute;
    z-index: 1;
    width: var(--CSS_ARROW_SIZE);
    height: var(--CSS_ARROW_SIZE);
    box-shadow: $shadow-spec-layer;
    overflow: hidden;
  }

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

  &--no-header {
    .zent-pop-buttons {
      display: inline-block;
      margin-left: 24px;
    }
  }

  &--has-header {
    .zent-pop-buttons {
      margin-top: 16px;
    }
  }

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