// Import related component scss files.
@import './ChatbotFootnote';

// ============================================================================
// Chatbot Footer
// ============================================================================
.pf-chatbot__footer {
  --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
  background-color: var(--pf-t--global--background--color--secondary--default);
  display: flex;
  flex-direction: column;
  row-gap: var(--pf-chatbot__footer--RowGap);
  position: relative; // this is so focus ring on parent chatbot doesn't include footer

  &.pf-m-primary {
    background-color: var(--pf-t--global--background--color--primary--default);
  }
}
.pf-chatbot__footer-container {
  padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  row-gap: var(--pf-chatbot__footer--RowGap);
}

// ============================================================================
// Chatbot Display Mode - Fullscreen and Embedded
// ============================================================================
@media screen and (min-width: 64rem) {
  .pf-chatbot--embedded,
  .pf-chatbot--fullscreen {
    .pf-chatbot__footer {
      align-items: center;
      .pf-v6-c-divider {
        display: none;
      }
    }
    .pf-chatbot__footer-container {
      width: 90%;
      max-width: 60rem;
      padding: var(--pf-t--global--spacer--sm) 0;
    }
  }
}

// ============================================================================
// Chatbot Display Mode - Docked
// ============================================================================
.pf-chatbot--docked {
  .pf-chatbot__footer-container {
    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
  }
}

// ============================================================================
// Chatbot Display Mode - Drawer
// ============================================================================
.pf-chatbot--drawer {
  .pf-chatbot__footer-container {
    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
  }
}

.pf-chatbot__footer.pf-m-compact .pf-chatbot__footer-container {
  padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
  row-gap: var(--pf-t--global--spacer--sm);
}

// ============================================================================
// High contrast
// ============================================================================
:root:where(.pf-v6-theme-high-contrast) {
  // Chatbot Display Mode - Fullscreen and Embedded
  @media screen and (min-width: 64rem) {
    .pf-chatbot--embedded,
    .pf-chatbot--fullscreen {
      .pf-chatbot__footer {
        .pf-v6-c-divider {
          display: var(--pf-v6-hidden-visible--Display);
        }
      }
    }
  }
}