<commit_before>// Module class for styling a text block callout with arrow pointing to other content.
//
// .-below          - Callout is positioned below an element.
// .-above          - Callout is positioned above element it's pointing to.
// .-right          - Callout is positioned to the right of element it's pointing to.
// .-dynamic-right  - Callout that starts below or above an item on mobile, but then switches to positon to the right of item.
// .-white          - White text and arrow (for use on dark backgrounds).
//
// Styleguide 4.10 - Message Callout

.message-callout {
  position: relative;

  .__copy {
    display: inline-block;
    padding: 18px 9px;
    position: relative;

    @include media($tablet) {
      margin: 0;
    }

    p {
      color: #000;
      font: 27px/1.3 $font-handwritten;
      letter-spacing: 0.03em;
      line-height: 1.1;
      margin: 0;
      text-transform: lowercase;
    }

    &:before {
      content: "";
      display: block;
      position: absolute;
    }
  }

  &.-white {
    .__copy {
      p {
        color: #fff;
      }
    }
  }


  // Class indicates callout is positioned below item it's pointing at.
  &.-below {
    padding-top: 18px;

    .__copy {

      // Arrow Up
      &:before {
        background: image-url("callout-arrow-up-black.png") 50% 50% / 25px no-repeat transparent;
        height: 38px;
        right: -5px;
        top: -15px;
        width: 25px;
      }
    }

    &.-white {
      .__copy {
        &:before {
          background-image: image-url("callout-arrow-up-white.png");
        }
      }
    }
  }


  // Class indicates callout is positioned above item it's pointing at.
  &.-above {
    .__copy {
      &:before {
        background: image-url("callout-arrow-down-black.png") 50% 50% / 14px no-repeat transparent;
        height: 50px;
        right: -20px;
        bottom: -15px;
        width: 20px;
      }
    }

    &.-white {
      .__copy {
        &:before {
          background-image: image-url("callout-arrow-down-white.png");
        }
      }
    }
  }


  &.-right {
    left: 144px; // Default value: override this value for specific scenarios.
    bottom: 0;
    position: absolute;

    .__copy {
      padding-left: 45px;

      &:before {
        background: image-url("callout-arrow-left-black.png") 50% 50% / 35px no-repeat transparent;
        height: 19px;
        left: 0;
        margin-top: -9px;
        right: auto;
        top: 50%;
        width: 38px;
      }
    }

    &.-white {
      .__copy {
        &:before {
          background-image: image-url("callout-arrow-left-white.png");
        }
      }
    }
  }


  // Class applies to a callout that starts below or above an item on mobile, but then switches to positon to the right of item.
  &.-dynamic-right {
    @include media($tablet) {
      left: 144px;  // Default value: override this value for specific scenarios.
      padding-top: 0;
      position: absolute;

      .__copy {
        left: 0;
        padding-left: 45px;

        &:before {
          background: image-url("callout-arrow-left-black.png") 50% 50% / 35px no-repeat transparent;
          height: 19px;
          left: 0;
          margin-top: -9px;
          right: auto;
          top: 50%;
          width: 38px;
        }
      }
    }

    @include media($tablet) {
      &.-white {
        .__copy {
          &:before {
            background-image: image-url("callout-arrow-left-white.png");
          }
        }
      }
    }
  }

}<commit_msg>Fixed image URLs in message callout.<commit_after>// Module class for styling a text block callout with arrow pointing to other content.
//
// .-below          - Callout is positioned below an element.
// .-above          - Callout is positioned above element it's pointing to.
// .-right          - Callout is positioned to the right of element it's pointing to.
// .-dynamic-right  - Callout that starts below or above an item on mobile, but then switches to positon to the right of item.
// .-white          - White text and arrow (for use on dark backgrounds).
//
// Styleguide 4.10 - Message Callout

.message-callout {
  position: relative;

  .__copy {
    display: inline-block;
    padding: 18px 9px;
    position: relative;

    @include media($tablet) {
      margin: 0;
    }

    p {
      color: #000;
      font: 27px/1.3 $font-handwritten;
      letter-spacing: 0.03em;
      line-height: 1.1;
      margin: 0;
      text-transform: lowercase;
    }

    &:before {
      content: "";
      display: block;
      position: absolute;
    }
  }

  &.-white {
    .__copy {
      p {
        color: #fff;
      }
    }
  }


  // Class indicates callout is positioned below item it's pointing at.
  &.-below {
    padding-top: 18px;

    .__copy {

      // Arrow Up
      &:before {
        background: url("assets/images/callout/arrow-up-black.png") 50% 50% / 25px no-repeat transparent;
        height: 38px;
        right: -5px;
        top: -15px;
        width: 25px;
      }
    }

    &.-white {
      .__copy {
        &:before {
          background-image: url("assets/images/callout/arrow-up-white.png");
        }
      }
    }
  }


  // Class indicates callout is positioned above item it's pointing at.
  &.-above {
    .__copy {
      &:before {
        background: url("assets/images/callout/arrow-down-black.png") 50% 50% / 14px no-repeat transparent;
        height: 50px;
        right: -20px;
        bottom: -15px;
        width: 20px;
      }
    }

    &.-white {
      .__copy {
        &:before {
          background-image: url("assets/images/callout/arrow-down-white.png");
        }
      }
    }
  }


  &.-right {
    // ## You can set position overrides on the `.message-callout` like this:
    // position: absolute;
    // left: 144px;
    // bottom: 0;

    .__copy {
      padding-left: 45px;

      &:before {
        background: url("assets/images/callout/arrow-left-black.png") 50% 50% / 35px no-repeat transparent;
        height: 19px;
        left: 0;
        margin-top: -9px;
        right: auto;
        top: 50%;
        width: 38px;
      }
    }

    &.-white {
      .__copy {
        &:before {
          background-image: url("assets/images/callout/arrow-left-white.png");
        }
      }
    }
  }


  // Class applies to a callout that starts below or above an item on mobile, but then switches to positon to the right of item.
  &.-dynamic-right {
    @include media($tablet) {
      padding-top: 0;

      // ## You can set position overrides on the `.message-callout` like this:
      // position: absolute;
      // left: 144px;

      .__copy {
        left: 0;
        padding-left: 45px;

        &:before {
          background: url("assets/images/callout/arrow-left-black.png") 50% 50% / 35px no-repeat transparent;
          height: 19px;
          left: 0;
          margin-top: -9px;
          right: auto;
          top: 50%;
          width: 38px;
        }
      }
    }

    @include media($tablet) {
      &.-white {
        .__copy {
          &:before {
            background-image: url("assets/images/callout/arrow-left-white.png");
          }
        }
      }
    }
  }

}
{'fraction_non_alphanumeric': 0.1252780867630701, 'fraction_numerical': 0.02502780867630701, 'mean_word_length': 1.6213556851311954, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6523208', 'n_tokens_mistral': 2477, 'n_tokens_neox': 2225, 'n_words': 617}