template-red.scss

$titleFontSize: 1.5em;
$buttonsContainerHeight: 2em;
$padding: 1em;

.push-response-banner[data-template="red"] {
  background: #FFE8E8;
  font-size: 1em;
  color: #000;
  border: 1px solid red;
  padding: $padding;

  .push-response-title-container {
    height: 1em;
    font-weight: bold;
    font-size: $titleFontSize;
    color: red;
  }

  .push-response-content-container {
    display: flex;
  }

  .push-response-right-column-container {
    padding-left: $padding;
  }

  .push-response-image-container {
    max-height: calc(100vh / 3 - 2 * #{$padding});
  }

  .push-response-message-container {
    max-height: calc(100vh / 3 - #{$titleFontSize} - #{$buttonsContainerHeight} - 4 * #{$padding});
    margin-top: $padding / 2;
    margin-bottom: $padding / 2 + $buttonsContainerHeight;
  }

  .push-response-buttons-container {
    height: $buttonsContainerHeight;

    .push-response-button {
      background-color: #fff;
      border: 1px solid red;
    }
  }
}