@use "../../variables/borders" as bordersVars;
@use "../../tools/a11y";
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/grid";
@use "../../tools/media";
@use "../../tools/shadows";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-picture {
  @include spacing.space-above;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;

  &__image-wrapper {
    padding: spacing.space(1.5);

    position: relative;

    @include borders.rounded-border;
  }

  &__image-wrapper:has(+ #{&}__transcript:not([hidden])) {
    border-radius: bordersVars.$rounded-border-radius
      bordersVars.$rounded-border-radius 0 0;
  }

  &__image {
    width: auto;
    height: auto;
    max-height: 40rem;
    margin: 0 auto;

    @include shadows.drop-shadow;

    @include colour.image-loader-background;
  }

  &__toggle-transcript {
    position: absolute;
    right: spacing.space(1);
    bottom: spacing.space(1);
  }

  &__transcript {
    @include colour.contrast;

    max-height: 25rem;

    padding: spacing.space(1.5);

    overflow: auto;

    border-radius: 0 0 bordersVars.$rounded-border-radius
      bordersVars.$rounded-border-radius;
  }

  &__caption {
    margin: 0 spacing.space(1);
    padding: spacing.space(1);

    @include typography.font-size(16);

    @include colour.colour-border("keyline", 1px, solid, bottom);
  }

  &--plain &__image-wrapper {
    padding: 0;
  }

  &--plain &__image {
    box-shadow: none;
  }

  @include media.on-tiny {
    &__image-wrapper {
      padding: 0;
    }

    .tna-column & {
      width: calc(100% + #{grid.gutter-width-tiny-double()});

      position: relative;
      left: -#{grid.gutter-width-tiny()};
    }

    &__image {
      max-height: 60rem;

      box-shadow: none;
    }

    &__caption {
      margin-right: 0;
      margin-left: 0;

      @include typography.font-size(14);
    }
  }

  @include colour.on-high-contrast-and-forced-colours {
    @include colour.colour-border("keyline-dark", 1px);

    &__caption {
      margin: 0;

      border: none;
    }
  }
}