@import '../config/import';

.crayons-banner {
  padding: var(--su-4);
  border-bottom: 1px solid;
  text-align: center;
  font-size: var(--fs-base);
  background: var(--base-90);
  color: var(--base-0);

  a {
    color: var(--body-color-inverted);
  }

  &--brand {
    background: var(--accent-brand);
    border-bottom-color: var(--accent-brand-darker);

    a {
      color: var(--body-color-inverted);
    }
  }

  &--success {
    background: var(--accent-success);
    border-bottom-color: var(--accent-success-darker);
    color: var(--body-color);

    a {
      color: var(--body-color);
    }
  }

  &--warning {
    background: var(--accent-warning);
    border-bottom-color: var(--accent-warning-darker);
    color: var(--body-color);

    a {
      color: var(--body-color);
    }
  }

  &--error {
    background: var(--accent-danger);
    border-bottom-color: var(--accent-danger-darker);
    color: var(--body-color-inverted);

    a {
      color: var(--body-color-inverted);
    }
  }

  a {
    text-decoration: underline;
  }
}

.c-banner {
  background: var(--banner-bg);
  color: RGB(var(--banner-color));
  padding: var(--su-6) var(--su-3);
  text-align: center;
  position: relative;
  overflow: hidden;

  @media (min-width: $breakpoint-m) {
    padding: var(--su-7) 0;
  }

  p {
    color: rgba(var(--banner-color), 0.75);
  }

  &__header {
    max-width: $breakpoint-m;
    margin: 0 auto;
    width: 100%;
  }

  &__cells {
    padding-top: var(--su-4);
    display: flex;
    flex-direction: column;
    gap: var(--su-6);

    @media (min-width: $breakpoint-m) {
      padding-top: var(--su-6);
      flex-direction: row;
      gap: var(--su-8);
    }
  }

  &__cell {
    flex: 1 auto;
  }
}
