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

$app-body-text-line-height-default: get-govuk-typography-style($size: 19, $breakpoint: null, $property: "line-height");
$app-body-text-line-height-tablet: get-govuk-typography-style($size: 19, $breakpoint: tablet, $property: "line-height");

@mixin separator {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: govuk-spacing(6);
  position: relative;

  &:before {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    bottom: 1px;
    right: 7px;
    width: 9px;
    height: 9px;
    margin: auto 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: solid;
    border-width: 2px 2px 0 0;
    border-color: $secondary-text-colour;
  }
}

$govuk-checkboxes-size: 40px;
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
$message-type-bottom-spacing: govuk-spacing(4);

a {

  &:hover .message-name-separator:before {
    border-color: $link-hover-colour;
  }

  .message-name-separator {

    margin-right: -2px;
    margin-left: -2px;

    &:before {
      border-color: $link-colour;
    }
  }

}

.message-name-separator {
  @include separator;
}

.template-list {

  &-item {

    &-with-checkbox {
      padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
    }

    &-hidden-by-default {
      display: none;
    }

    &-without-ancestors {

      a {

        display: block;

        &:first-child {
          display: block;
        }

        &.template-list-folder:first-of-type {
          background-position: 0 2px;
          padding-left: 0;
          text-indent: 35px;

          @include govuk-media-query($from: tablet) {
            text-indent: 40px;
          }

        }

      }

      .template-list-template,
      .template-list-folder {

        position: relative; /* contain absolutely positioned ::before pseudo element*/
        display: block; /* fill horizontal space to allow hint/meta below to float */

        &::before {
          content: '';
          position: absolute;
          left: 0px;
          bottom: -1 * $app-body-text-line-height-default; /* extend link by line height of hint/meta so it covers it */
          width: 100%;
          height: $app-body-text-line-height-default;

          @include govuk-media-query($from: tablet) {
            bottom: -1 * $app-body-text-line-height-tablet;
            height: $app-body-text-line-height-tablet;
          }
        }

        &:focus,
        &:active {

          &,
          &::before {
            background-color: $govuk-focus-colour;
          }

          &,
          & + .template-list-item-hint,
          .message-type {
            color: $govuk-focus-text-colour;
          }

          &::before {
            box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
          }

        }

        & + .template-list-item-hint,
        & + .message-type {
          position: relative; /* needs to be non-static to have a z-index above the link :before element */
        }

      }

    }

    &-label {
      position: absolute;
      left: 0;
      width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
      height: 100%;
      padding: 0;
    }

    // Fix for GOVUK Frontend selector with high precendence
    // https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
    &-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
      margin-bottom: $message-type-bottom-spacing;
    }

    &-hint {
      padding-left: 0;
    }

  }

  &-folder,
  &-template {
    @include govuk-font($size: 24, $weight: bold, $line-height: 1.5);
    @include govuk-media-query($from: tablet) {
      line-height: 1.25;
    }
  }

  &-folder {

    display: inline;
    padding-left: 35px;
    background-image: file-url('folder-blue-bold.svg');
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: 0px 4px;

    @include govuk-media-query($from: tablet) {
      padding-left: 40px;
    }

    &:hover {
      background-image: file-url('folder-blue-bold-hover.svg');
    }

    &:focus,
    &:active {
      background-image: file-url('folder-black-bold.svg');
    }

  }

  &-template {
    a {
      display: inline;
    }
  }

  &-empty {
    color: $secondary-text-colour;
    padding: govuk-spacing(3) 0 govuk-spacing(2) 0;
  }

  &-selected-counter {
    color: $secondary-text-colour;
    margin: govuk-spacing(3) 0;

    @include media(tablet) {
      position: absolute;
      right: 0;
      top: govuk-spacing(6) - 1px;
      margin: 0;
    }

    .content-fixed__bottom & {
      right: govuk-spacing(3);
    }

  }

}

.sticky-template-form {

  padding: govuk-spacing(3);
  margin: govuk-spacing(3) * -1;

  &:focus {
    outline: none;
  }

}

.folder-heading {

  .govuk-grid-row & {
    margin: govuk-spacing(3) 0 20px 0;
    word-wrap: break-word;
  }

  a,
  &-folder,
  &-subfolder {

    display: inline;
    vertical-align: top;
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: 0px 4px;
    min-height: 30px;

  }

  &-folder {
    padding: 0 0 0 40px;
    background-image: file-url('folder-black-bold.svg');
  }

  &-folder-truncated {
    width: 0;
    padding: 0 0 0 30px;
    white-space: nowrap;
    overflow: hidden;
  }

  &-folder-root-truncated {
    max-width: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  a {

    display: inline-block;
    vertical-align: top;

    &.folder-heading-folder {

      display: inline;
      background-image: file-url('folder-blue-bold.svg');
      background-position: 0px 4px;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        background-image: file-url('folder-blue-bold-hover.svg');
      }

    }

    &.folder-heading-folder-truncated {
      display: inline-block;
      background-position: 0px 2px;
    }

    &:hover {
      color: $link-hover-colour;
    }

  }

  &-separator {
    @include separator;
  }

  &-manage-link {
    display: block;
    text-align: right;
    padding: govuk-spacing(4) 0 0 0;
    position: relative;
    top: -6px;
  }

}