rails/rails

// ----------------------------------------------------------------------------
// Containers
//
// These are interstitial elements used throughout the guides, providing help,
// context, more info, or warnings to readers. 
// ----------------------------------------------------------------------------

/* Same bottom margin for special boxes than for regular paragraphs, this way
intermediate whitespace looks uniform. */

.interstitial {
  background-repeat: no-repeat;
  background-size: 36px 36px;
  border-radius: $base-border-radius;
  border: 2px solid $gray-500;
  border-style: solid !important;
  border-width: 2px !important;
  min-height: calc(36px + 1.2em);
  margin: 2em auto;
  padding: 0.75em !important;
  position: relative;

  // Padding and spacing for LTR vs RTL langauge defaults
  :where(body[dir="ltr"]) & { background-position: 10px 10px; padding-right: 1em !important; padding-left: 56px !important; }
  :where(body[dir="rtl"]) & { background-position: calc(100% - 10px) 10px; padding-right: 56px !important; padding-left: 1em !important; }

  /* Remove bottom margin of paragraphs in special boxes, otherwise they get a
  spurious blank area below with the box background. */
  p {
    margin-bottom: 0.75em;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &.code {
    border: none !important;
    background-color: $gray-900;
    min-height: auto; // remove if icon is restored
    padding-left: 1em !important; // remove if icon is restored

    pre {margin: 0;}

    button.clipboard-button {
      color: $gray-100;
      cursor: pointer;
      background-color: $gray-700;
      border: 1px solid $gray-500;
      border-radius: 4px;
      font-size: 0.75em;
      padding: 0.25em 0.5em !important;
      position: absolute;
        bottom: 10px;
        :where(body[dir="ltr"]) & { right: 10px; }
        :where(body[dir="rtl"]) & { left: 10px; }
      text-transform: uppercase;
    } // button.clipboard-button
  } // &.code

  &.note {
    border-color: $note;
    background-color: $note-bkgnd;
    background-image: url("../images/icon_task-list-pin.svg");
  }

  &.work-in-progress,
  &.todo {
    border-color: $note;
    background-color: $note-bkgnd;
    background-image: url("../images/icon_construction-sign.svg");
  }

  &.info {
    border-color: $tip;
    background-color: $tip-bkgnd;
    background-image: url("../images/icon_bulb-1.svg");
  }

  &.warning {
    border-color: $stop;
    background-color: $stop-bkgnd;
    background-image: url("../images/icon_hand-stop.svg");
  }

  &.question {
    border-color: $gray-500;
    background-color: $gray-200;
    background-image: url("../images/icon_question-bubble.svg");
  }

  &.kindle {
    padding-top: 1em !important;
  }
} // .interstitial