/**
 * Masonry side tiles paragraph.
 */

@use "sass:math";

// Colour variables used in this paragraph.
$d-p-side-tiles-image-background-color: $color-odysseus !default;
$d-p-side-tiles-text-background-color: $color-agamemnon !default;
$d-p-side-tiles-text-background-color-secondary: darken($d-p-side-tiles-text-background-color, 15%) !default;
$d-p-side-tiles-text-color: $color-odysseus !default;
$d-p-side-tiles-theme-invert-text-color: $color-cassandra !default;
$d-p-side-tiles-link-color: $color-nestor !default;
$d-p-side-tiles-link-hover-color: darken($d-p-side-tiles-link-color, 5%) !default;
$d-p-side-tiles-line-color: $color-nestor !default;
$d-p-side-tiles-link-color-inverted: $color-agamemnon !default;
$d-p-side-tiles-line-color-inverted: $color-agamemnon !default;
$d-p-side-tiles-header-color: $color-odysseus !default;
$d-p-side-tiles-overlay-background: $color-cassandra !default;
$d-p-side-tiles-overlay-color: $color-odysseus !default;
$d-p-side-tiles-overlay-opacity: 0.6 !default;

// Margins, paddings and sizing.
$d-p-side-tiles-mobile-height: 18.75rem !default;
$d-p-side-tiles-text-desktop-padding-y: 5% !default;
$d-p-side-tiles-text-mobile-padding: 7% !default;
$d-p-side-tiles-text-width: 35.625rem !default;
$d-p-side-tiles-half-padding: 10% !default; // Spacing between content and half of the screen
$d-p-side-tiles-long-text-margin-bottom: 0 !default;

// Override default values.
.padding-top-default {
  .d-p-side-tiles-content {
    padding-top: $d-p-side-tiles-text-mobile-padding;
    @include media-breakpoint-up(md) {
      padding-top: $d-p-side-tiles-text-desktop-padding-y;
    }
  }
}
.padding-bottom-default {
  .d-p-side-tiles-content {
    padding-bottom: $d-p-side-tiles-text-mobile-padding;
    @include media-breakpoint-up(md) {
      padding-bottom: $d-p-side-tiles-text-desktop-padding-y;
    }
  }
}

.theme-default {
  .d-p-side-tiles-wrapper {
    background-color: $d-p-side-tiles-text-background-color;
    color: $d-p-side-tiles-text-color;

    &.image-side-left {
      background-color: $d-p-side-tiles-text-background-color-secondary;
    }

    .field--name-field-d-main-title {
      color: $d-p-side-tiles-header-color;
    }
  }
}

.d-p-side-tiles-wrapper {
  .d-p-side-tiles-content {

    .field--name-field-d-main-title {
      @include font-main-header;
      text-align: left;

      &::after {
        @include decoration-header-line($d-p-side-tiles-line-color, $d-p-side-tiles-line-color-inverted)
      }

      &:last-child::after {
        display: none;
      }
    }

    .field--name-field-d-long-text {
      margin-bottom: $d-p-side-tiles-long-text-margin-bottom;
    }

    a:not(.btn) {
      color: $d-p-side-tiles-link-color;

      @at-root .theme-secondary & {
        color: $d-p-side-tiles-link-color-inverted;
      }

      &:hover {
        color: $d-p-side-tiles-link-hover-color;
      }
    }
  }

  .d-p-side-tiles-images {
    padding-left: 0;
    padding-right: 0;
    background-color: $d-p-side-tiles-image-background-color;

    .field--name-field-d-media-image {
      background-color: $d-p-side-tiles-image-background-color;

      a {
        display: block;
      }
      img {
        width: 100%;
        height: auto;
        margin: 0 !important;
        display: block;
      }
    }
  }

  // Masonry styles.
  .d-side-tiles {
    float: none !important;
    margin: 0 !important;
    display: block !important;

    .d-tiles-sizer,
    .d-tiles-item {
      width: 50%;
    }

    .d-tiles-item {
      padding: 2px;
    }

    .d-tiles-caption {
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 2px;
      right: 2px;
      background: $d-p-side-tiles-overlay-background;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        color: $d-p-side-tiles-overlay-color;
        font-size: 1.5rem;
        font-weight: bold;

        small {
          display: block;
          font-size: 1rem;
          font-weight: normal;
        }
      }
    }

    .d-tiles-caption:hover {
      opacity: $d-p-side-tiles-overlay-opacity;
    }
  }

  @include media-breakpoint-down(sm) {
    .d-p-side-tiles-images {
      border: 2px solid $d-p-side-tiles-image-background-color;
    }
  }

  @include media-breakpoint-up(md) {

    .d-p-side-tiles-content {
      display: flex;
      align-items: center;
      border: 2px solid $d-p-side-tiles-image-background-color;

      .d-p-side-tiles-content-fields {
        width: $d-p-side-tiles-text-width;
      }
    }
    &.image-side {
      &-right {
        .d-p-side-tiles-content {
          justify-content: flex-end;
          border-left: none;
          order: 1;
        }
        .d-p-side-tiles-images {
          order: 2;
          border-right: 2px solid $d-p-side-tiles-image-background-color;
        }
        .d-p-side-tiles-content-fields {
          padding-left: math.div($grid-gutter-width, 2);
          padding-right: $d-p-side-tiles-half-padding;
        }
      }
      &-left {
        .d-p-side-tiles-content {
          justify-content: flex-start;
          border-right: none;
        }
        .d-p-side-tiles-images {
          border-left: 2px solid $d-p-side-tiles-image-background-color;
        }
        .d-p-side-tiles-content-fields {
          padding-left: $d-p-side-tiles-half-padding;
          padding-right: math.div($grid-gutter-width, 2);
        }
      }
    }
  }
}

// @TODO Introduce .paragraph-light and .paragraph-dark

@include media-breakpoint-up(md) {
  .wrapper-d_p_side_tiles + .wrapper-d_p_text_with_bckg,
  .wrapper-d_p_side_tiles + .wrapper-d_p_subscribe_file,
  .wrapper-d_p_side_tiles + .wrapper-d_p_form,
  .wrapper-d_p_side_tiles + .wrapper-d_p_counters,
  .wrapper-d_p_side_tiles + .wrapper-d_p_banner,
  .wrapper-d_p_side_tiles + .wrapper-d_p_side_embed,
  .wrapper-d_p_side_tiles + .wrapper-d_p_side_image {
    border-top: 2px solid transparent;
  }
}

.wrapper-d_p_text_with_bckg + .wrapper-d_p_side_tiles,
.wrapper-d_p_subscribe_file + .wrapper-d_p_side_tiles,
.wrapper-d_p_form + .wrapper-d_p_side_tiles,
.wrapper-d_p_counters + .wrapper-d_p_side_tiles,
.wrapper-d_p_banner + .wrapper-d_p_side_tiles,
.wrapper-d_p_side_embed + .wrapper-d_p_side_tiles,
.wrapper-d_p_side_image + .wrapper-d_p_side_tiles {
  border-top: 2px solid transparent;
}
