@import "../../styles/index.scss";

.popover-container {
  min-width: 240px;
  padding: 12px;
  border-radius: 12px !important;
  box-shadow: 0px 0px 4px 0px $boxShadowColor;
  margin-top: 2px;

  .popover-content {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .popover-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .popover-header-title {
        font-size: $normalFontSize;
        font-weight: $ExtraFontWeight;
        line-height: 21px;
        color: $darkColor;
      }

      .popover-close-icon {
        @include focus-visible-ring;
      }
    }

    .popover-body {
      overflow-y: auto;
      height: calc(100% - 40px);
      width: 100%;
    }

    .popover-footer {
      .popover-footer-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        .divider-line {
          background: $disabledSecondaryBorder;
          width: 100%;
          height: 1px;
        }
        .popover-footer-buttons {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
        }
      }
    }
  }
}
