@use '../../layout/container' as *;

@mixin banner-info($bg-color) {
  background-color: $bg-color;
  padding-top: var(--cbp-space-4x);
  padding-bottom: var(--cbp-space-4x);

  & > div {
    @content;
    @extend .cbp-fluid-container;

    & > div:first-child {
      display: flex;
      flex-shrink: 0;
    }
  }
}

@mixin banner-text($text-color) {
  color: $text-color;
  line-height: var(--cbp-line-height-sm);
  margin-top: var(--cbp-space-4x);
  margin-bottom: var(--cbp-space-4x);
  max-width: 100%; 
}

@mixin banner-title($text-color) {
  color: $text-color;
  font-size: var(--cbp-font-size-heading-md);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-line-height-sm);

  &::first-line {
    line-height: initial;
  }
}

@mixin banner-dismiss($text-color) {
  color: $text-color;
}