.ns("frontend.components.pieces.top-banner", {
  .ui("banner", {
    position: relative;
    margin-bottom: 15px;
    height: 70px;
    padding: 15px;

    &.success {
      background-color: @greenLightest;
    }

    &.warning {
      background-color: @yellowLightest;
    }

    &.danger {
      background-color: @redLightest;
    }

    > .text {
      margin-top: 10px;

      > .banner-dismiss {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  });
});


.ns("frontend.components.pieces.top-banner", {
  .ui("banner", {
    position: relative;
    padding: 15px;

    &.success {
      background-color: @greenLightest;
    }

    &.warning {
      background-color: @yellowLightest;
    }

    &.danger {
      background-color: @redLightest;
    }

    > .text {
      // TODO This is a bad componentization. When icons are
      // componentized we should give them this styling, but until then ...
      > div > .banner-alert-icon {
        margin-right: 11px;
      }

      > .banner-dismiss {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  });
});


Add breathing room to banner notification
Add breathing room to banner notification
