notifications-admin/app/assets/stylesheets/components/letter.scss

$iso-paper-ratio: 141.42135624%;

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

.letter {

  padding: $iso-paper-ratio 0 0 0;
  margin: 0 0 $gutter 0;
  position: relative;
  background: $panel-colour;

  &:before {
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -0.5em;
    font-size: 96px;
    color: $white;
    overflow: hidden;
    display: block;
    vertical-align: bottom;
    animation: ellipsis steps(4,end) 1.3s infinite;
    content: "\2026"; // ellipsis
    width: 0px;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px $border-colour;
  }

  &-postage {

    $art-width: 97.83;
    $art-height: 82.27;
    $fold-height: 124px;
    $envelope-colour: #C4B186;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: $fold-height * ($art-width / $art-height);
    height: $fold-height;
    margin: 0;
    background-color: mix($envelope-colour, $grey-1);
    background-size: auto $fold-height;
    background-position: right 0;
    background-repeat: no-repeat;
    background-origin: border-box;
    text-indent: -1000em;
    border-bottom: 1px solid $border-colour;
    border-left: 1px solid $border-colour;
    box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);

    &-first {
      background-image: file-url('envelope-1st-class.svg');
    }

    &-second {
      background-image: file-url('envelope-2nd-class.svg');
    }

    .letter-sent &:hover {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
      background-image: file-url('envelope-fold.svg');
    }

  }

  img {
    display: block;
    width: 100%;
    background: $white;
    position: absolute;
    top: 0;
    left: 0;
  }

}