@use '~@moda/om';

.PromoBanner {
  $self: &;

  @include om.text(body2);

  background-color: om.color(cream);
  border-top: om.space(1) solid om.color(burnt-orange);

  &__constrain {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__child {
    min-width: om.space(11);
    padding: om.spacing(2, 3);

    &--center {
      flex: 1;
      text-align: center;
    }

    &--left {
      padding-left: 0;
    }

    &--right {
      padding-right: 0;
      text-align: right;
    }

    > a {
      color: om.color(ink);

      @include om.thin-underline();
    }
  }

  @include om.breakpoint(sm, $prop: max-width) {
    #{$self}__child--left,
    #{$self}__child--right {
      display: none;
    }
  }
}