@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';

@layer kz-components {
  .expertAdviceContainer {
    background-color: $color-purple-100;
    border: var(--border-width-1) var(--border-solid-border-style) var(--color-purple-400);
    box-shadow: none;
    color: $color-purple-800;

    &:hover {
      border-color: $color-purple-500;
    }
  }

  // Override Collapsible header
  .expertAdviceContainer > div {
    &:first-of-type {
      background-color: $color-purple-100;
      border-radius: $border-borderless-border-radius;
    }
  }

  .expertAdviceHeader {
    background-color: $color-purple-100;
    flex: 1 1 auto;
    align-items: center;
    display: flex;
  }

  .expertAdviceHeading {
    color: $color-purple-600;

    .expertAdviceContainer:hover & {
      color: $color-purple-700;
    }
  }

  .expertAdviceIcon {
    margin-inline-end: $spacing-sm;
    width: 1.75rem;
    height: 1.75rem;
  }

  .expertAdviceSection {
    padding: 0 $spacing-md $spacing-md;
  }
}