// Component: Figure

@use '00-config' as *;

$align-margin: rem(gesso-spacing(4));
$align-max-width: calc(50% - #{rem(gesso-spacing(2))});

.c-figure {
  display: table;
  margin-block: 0 rem(gesso-spacing(2));

  &.align-center,
  &.u-align-center {
    clear: both;
    display: table;
    margin-block-start: rem(gesso-spacing(2));
  }

  &.u-align-inline-end {
    @include breakpoint(gesso-breakpoint(tablet)) {
      margin-inline-start: $align-margin;
      max-width: $align-max-width;
    }
  }

  &.u-align-inline-start {
    @include breakpoint(gesso-breakpoint(tablet)) {
      margin-inline-end: $align-margin;
      max-width: $align-max-width;
    }
  }

  &.align-left,
  &.u-align-left {
    @include breakpoint(gesso-breakpoint(tablet)) {
      margin-right: $align-margin;
      max-width: $align-max-width;
    }
  }

  &.align-right,
  &.u-align-right {
    @include breakpoint(gesso-breakpoint(tablet)) {
      margin-left: $align-margin;
      max-width: $align-max-width;
    }
  }

  // Tweak styling in WYSIWYG editor.
  @if $wysiwyg {
    // stylelint-disable
    .cke_widget_wrapper:hover & {
      outline: 2px solid #ffd25c;
    }

    .cke_widget_wrapper.cke_widget_focused &,
    .cke_widget_wrapper.cke_widget_editable_focused & {
      outline: 2px solid #47a4f5;
    }
    // stylelint-enable

    .media-library-item__edit {
      inset-block-start: rem(gesso-spacing(1));
      inset-inline: rem(gesso-spacing(1)) initial;
      position: absolute;
    }
  }
}

.c-figure__caption {
  caption-side: bottom;
  display: table-caption;
  font-weight: gesso-font-weight(semibold);
  margin-block-start: rem(gesso-spacing(1));
}

.c-figure--iframe {
  display: block;
  width: 100%;

  &.align-center,
  &.u-align-center {
    display: block;
  }

  .c-figure__caption {
    display: block;
  }
}
