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

.cbp-banner__security {
  @include banner-info(var(--cbp-color-warning-base)) {
    & > div > img {
      display: flex;
      align-items: center;
      height: var(--cbp-space-12x);
      justify-content: center;
      margin-right: var(--cbp-space-4x);
    }
  }

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

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

  button {
    @include banner-dismiss(var(--cbp-color-text-darker));
  }
}


// TechDebt: These look like generic utility classes and don't belong here
.cbp-text-bold {
  font-weight: var(--cbp-font-weight-bold);
}
.cbp-text-italic {
  font-style: italic;
}

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

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

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