@import '../styles/themes/themes.less';


.@{bk-prefix}-popover {
  &.@{bk-prefix}-pop2-content {
    position: absolute;

    &.hidden {
      display: none;
    }

    padding: 12px;

    font-size: 12px;
    color: #fff;
    background: #26323d;
    border-radius: 4px;
    box-sizing: border-box;

    .@{bk-prefix}-pop2-arrow {
      position: absolute;
      z-index: -1;
      width: 8px;
      height: 8px;
      background: #333;
      transform: rotate(45deg);
    }

    &[data-theme^='light'] {
      color: #26323d;
      background-color: #fff;
      box-shadow: 0 0 6px 0 #dcdee5;
      border: 1px solid #dcdee5;
      .@{bk-prefix}-pop2-arrow {
        background-color: #fff;
        &[data-arrow='top']{
          border-right: 1px solid transparent;
          border-bottom: 1px solid transparent;

          border-left: 1px solid #dcdee5;
          border-top: 1px solid #dcdee5;
        }
        &[data-arrow='right']{
          border-left: 1px solid transparent;
          border-bottom: 1px solid transparent;

          border-right: 1px solid #dcdee5;
          border-top: 1px solid #dcdee5
        }
        &[data-arrow='left']{
          border-right: 1px solid transparent;
          border-top: 1px solid transparent;

          border-left: 1px solid #dcdee5;
          border-bottom: 1px solid #dcdee5;
        }
        &[data-arrow='bottom']{
          border-left: 1px solid transparent;
          border-top: 1px solid transparent;

          border-right: 1px solid #dcdee5;
          border-bottom: 1px solid #dcdee5;
        }
      }
    }
  }
}
