//@use '../../base/colors' as *;
@use 'mixin' as *;

.cbp-banner__info {

  @include banner-info(var(--cbp-color-info-dark)) {

    & > div > i {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--cbp-color-info-darker);
      background-color: var(--cbp-color-info-light);
      border-radius: 50%;
      font-size: var(--cbp-space-8x); // This is actually the icon size, so use space token instead of font
      height: var(--cbp-space-12x);
      justify-content: center;
      margin-right: var(--cbp-space-4x);
      width: var(--cbp-space-12x);
    }
  }

  .cbp-banner__info-title {
    @include banner-title(var(--cbp-color-text-lighter));
  }

  .cbp-banner__text {
    @include banner-text(var(--cbp-color-text-lightest));
  }

  button {
    color: var(--cbp-color-text-lightest);
  }

  button:hover {
    color: var(--cbp-color-text-darker);
  }

}

.d-none-lg {
  @media only screen and (min-width : 599px) {
    display: none !important;
  }
}

.d-none-sm {
  @media only screen and (max-width : 599px) {
    display: none !important;
  }
}

@media only screen and (min-width : 599px) {
  .cbp-banner__info > div {
    display: flex;
  }

  .cbp-banner__info .cbp-banner__text {
    margin-bottom: 0;
    margin-top: var(--cbp-space-3x);
  }


  .cbp-banner__info button {
    align-self: center;
    flex-shrink: 0;
    margin-left: auto;
  }
}