@use '../../../../styles/variables' as *;

:host {
  --info-card-background: #{$color-neutral-lightest};
  --info-card-border-color: #{$color-neutral-lighter};
  --info-card-color: #{$color-neutral-regular};

  background: var(--info-card-background);
  border: 1px solid var(--info-card-border-color);
  border-radius: rhythm(1);
  color: var(--info-card-color);
  display: flex;
  align-items: center;
  gap: rhythm(1);
  padding: rhythm(1.5) rhythm(2);

  &.warning {
    --info-card-background: #{$color-secondary-lightest};
    --info-card-border-color: #{$color-secondary-light};
    --info-card-color: #{$color-secondary-stronger};
  }
  &.highlight {
    --info-card-background: #{$color-tertiary-lightest};
    --info-card-border-color: #{$color-tertiary-lighter};
    --info-card-color: #{$color-tertiary-strong};
  }
  &.transparent {
    --info-card-background: transparent;
    --info-card-border-color: transparent;
    --info-card-color: #{$color-neutral-regular};
    padding: 0;
    border-radius: 0;
  }

  .body-m {
    padding: rhythm(0.25) 0;
  }
}
