// Govspeak attachment
// https://components.publishing.service.gov.uk/component-guide/govspeak/block_attachments
//
// Support:
// - alphagov/whitehall: ✔︎
// - alphagov/govspeak: ✔︎

// stylelint-disable max-nesting-depth

.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
.gem-c-govspeak {
  // Scope attachment and attachment-link component styles to gem-c-govspeak
  @import "../attachment-link";
  @import "../attachment";

  // This block is duplicated from Whitehall as a transitional step, see the
  // commit message for 2d893c10ee3f2cab27162b9aba38b12379a71d07 before making
  // changes, original version:
  // https://github.com/alphagov/whitehall/blob/main/app/assets/stylesheets/frontend/helpers/_attachment.scss
  $thumbnail-width: 99px;

  .attachment {
    position: relative;
    margin: govuk-spacing(6) 0;
    padding: govuk-spacing(3) 0 0 ($thumbnail-width + govuk-spacing(6));
    @include govuk-clearfix;

    &:first-child {
      margin-top: 0;
      padding-top: 0;
    }

    .attachment-thumb {
      position: relative;
      float: left;
      margin-top: $govuk-border-width;
      margin-left: -($thumbnail-width + govuk-spacing(6) - $govuk-border-width);
      padding-bottom: govuk-spacing(3);

      img {
        display: block;
        width: $thumbnail-width;
        height: 140px;
        background: govuk-colour("white");
        outline: $govuk-border-width solid transparentize(govuk-colour("black"), .9);

        @include govuk-if-ie8 {
          // IE8 incorrectly asserts the "max-width: 100%" rule to be 0
          // because of the collapsed width on its floating container
          // Reset the max-width so that thumbnails render at the specified
          // width above.
          // http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/
          max-width: none;
          border: $govuk-border-width solid govuk-colour("mid-grey", $legacy: "grey-3");
        }

        box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
      }
    }

    .attachment-details {
      h2 {
        @include govuk-font($size: 27);
        margin: 0;
      }

      p {
        margin: govuk-spacing(2) 0;
      }

      .metadata {
        @include govuk-font($size: 14);
      }

      .url {
        word-break: break-word;
        word-wrap: break-word;
      }

      .changed,
      .references,
      .unnumbered-paper {
        display: block;
      }

      .preview,
      .download {
        @include govuk-font($size: 19);

        strong {
          font-weight: bold;
        }
      }

      .preview {
        padding-right: govuk-spacing(3);
      }

      .opendocument-help {
        @include govuk-font($size: 14);
      }

      .accessibility-warning {
        h2 {
          @include govuk-font($size: 14);
          margin: 0;
        }
        word-break: break-word;
        word-wrap: break-word;
      }

      .js-hidden {
        display: none;
      }
    }
  }

  &.direction-rtl .attachment {
    padding: govuk-spacing(3) ($thumbnail-width + govuk-spacing(6)) 0 0;

    .attachment-thumb {
      float: right;
      margin-left: 0;
      margin-right: (($thumbnail-width * -1) - govuk-spacing(3));
    }
  }
}