.lbaic-settings-popup {
  // TODO - fix this
  .lbaic-settings-notice.default {
    --lbaic-settings-notice-color: var(--lbaic-settings-notice-default-color);
    --lbaic-settings-notice-bg: var(--lbaic-settings-notice-default-bg);
  }

  .lbaic-settings-notice.error {
    --lbaic-settings-notice-color: var(--lbaic-settings-notice-error-color);
    --lbaic-settings-notice-bg: var(--lbaic-settings-notice-error-bg);
  }

  .lbaic-settings-notice.warning {
    --lbaic-settings-notice-color: var(--lbaic-settings-notice-warning-color);
    --lbaic-settings-notice-bg: var(--lbaic-settings-notice-warning-bg);
  }

  .lbaic-settings-notice.success {
    --lbaic-settings-notice-color: var(--lbaic-settings-notice-success-color);
    --lbaic-settings-notice-bg: var(--lbaic-settings-notice-success-bg);
  }

  &-layout {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 16px;
    z-index: var(--lbaic-settings-popup-z-index, 300);
  }

  &-wrapper {
    width: 100%;
    min-height: 380px;
  }

  &-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--lbaic-settings-popup-overlay);
    z-index: 1;
  }

  & {
    --lbaic-settings-popup-gap: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--lbaic-settings-popup-max-width, 500px);
    //max-height: calc(100vh - var(--wp-admin--admin-bar--height, 46px) - var(--lbaic-settings-popup-gap));
    max-height: calc(min(100dvh, 100svh) - var(--wp-admin--admin-bar--height, 46px) - var(--lbaic-settings-popup-gap) - env(safe-area-inset-top, 0px));
    overflow: hidden;
    margin-block: auto;
    margin-inline: auto;
    padding-block: 24px;
    background-color: var(--lbaic-settings-popup-bg);
    border-radius: 6px;
    box-shadow: var(--lbaic-settings-popup-shadow);
    z-index: 2;

    @include min-width($lbaic-settings-wp-breakpoint) {
      --lbaic-settings-popup-gap: 64px;
    }
  }

  &-in {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  &-header {
    padding-inline: 24px;
    flex-shrink: 0;

    &-in {
      padding-block-end: 18px;
    }

    &-content {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    &-icon {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      fill: currentColor;
    }

    &-label {
      font-size: var(--lbaic-settings-popup-header-fs, var(--lbaic-settings-fs-20));
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-popup-header-color);
      line-height: var(--lbaic-settings-lh-24);
    }

    &-actions {
      flex: 1 0 0;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    &-action {
      width: 21px;
      height: 21px;
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--lbaic-settings-chats-actions-primary-bg, transparent);
      border-radius: 6px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;

      &:hover {
        --lbaic-settings-chats-actions-primary-bg: var(--lbaic-settings-chats-user-actions-hover);
      }

      &-i {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        fill: currentColor;
      }
    }

    &-desc {
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-400);
      color: var(--lbaic-settings-popup-header-desc-color);
      line-height: var(--lbaic-settings-lh-18);
      margin-block-start: 12px;
    }
  }

  &-body {
    position: relative;
    padding-block: 20px;
    padding-inline: 14px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &-in {
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      max-height: 100%;
      padding-block: 4px;
      padding-inline: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  &-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--lbaic-settings-white);
    z-index: 20;
  }

  &-item {
    position: relative;
    width: auto;
    height: auto;

    &-none {
      opacity: 0;
      visibility: hidden;
    }

    @include min-width($lbaic-settings-wp-breakpoint) {
      width: 100%;
      height: 100%;
    }
  }

  &-footer {
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    flex-shrink: 0;

    @include min-width($lbaic-settings-wp-breakpoint) {
      flex-direction: row;

      & > * {
        flex: 1 0 0;
      }
    }

    &-in {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 10px;
      @include min-width($lbaic-settings-wp-breakpoint) {
        flex-direction: row;
        justify-content: space-between;
        flex: 1 0 0;
      }
    }
  }
}
