@use "sass:math";
@use "../../core/settings" as *;
@use "../../core/tools" as *;
@use "../../core/helpers" as *;

////
/// Images component
///
/// 1. Overrides default browser margin values.
/// 2. Makes the image width two thirds of its container for desktop.
/// 3. Avoid image printing full width of a page.
///
/// @group components/images
////

@include nhsuk-exports("nhsuk/components/images") {
  .nhsuk-image {
    box-sizing: border-box;

    margin-right: 0; // [1]
    margin-left: 0; // [1]

    border-bottom: 1px solid $nhsuk-border-colour;

    color: $nhsuk-text-colour;
    background-color: $nhsuk-card-background-colour;

    @include nhsuk-responsive-margin(6, "bottom");

    :first-child:empty + & {
      margin-top: 0;
    }

    &:not(:first-child) {
      @include nhsuk-responsive-margin(6, "top");
    }

    @media #{nhsuk-from-breakpoint(tablet)} {
      width: math.percentage(math.div(2, 3)); // [2]
    }

    @media print {
      width: math.percentage(math.div(1, 2)); // [3]
    }
  }

  .nhsuk-image--no-border {
    border-bottom: none;
  }

  .nhsuk-image--no-background {
    background-color: transparent;
  }

  .nhsuk-image img,
  .nhsuk-image__img {
    display: block;
    width: 100%;
  }

  .nhsuk-image__caption {
    padding: nhsuk-spacing(3);

    @include nhsuk-font-size(16);
  }
}