/*
Side by Side

Styleguide 2.d_p_side_by_side
*/

@use "sass:math";

// Colour variables used in this paragraph
$d-p-side-by-side-line-color: $color-agamemnon !default;
$d-p-side-by-side-line-color-inverted: $color-nestor !default;

// Margins, paddings and sizing.
$d-p-side-by-side-padding-y: 5% !default;
$d-p-side-by-side-header-padding: 2.5% !default;

$d-p-side-by-side-content-padding-x: 7vw !default;
$d-p-side-by-side-text-box-padding-y: $grid-gutter-width !default;
$d-p-side-by-side-node-box-margin-x: 0 - math.div($grid-gutter-width, 2) !default;
$d-p-side-by-side-image-background-padding-y: 130px !default;

// Other settings
$d-p-side-by-side-image-single_text_block-themed-background-opacity: 0.2 !default;
$d-p-side-by-side-image-single_text_block-themes: $d-p-themes;

// Override default paddings values for paragraphs without title and description.
.padding-top-default {
  .paragraph.paragraph--type--d-p-side-by-side.without-header {
    padding-top: 0;
  }
}
.padding-bottom-default {
  .paragraph.paragraph--type--d-p-side-by-side {
    padding-bottom: 0;
  }
}

.d-p-side-by-side {
  text-align: center;

  > div > .field--name-field-d-media-icon {
    text-align: center;
  }

  .side-header {
    .field--name-field-d-main-title {
      @include font-main-header;

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

    .field--name-field-d-long-text {
      @include font-subtitle;
    }

  }
  .wrapper-d_p_node,
  .wrapper-d_p_single_text_block {
    padding: $d-p-side-by-side-text-box-padding-y 0;
    text-align: left;
    display: flex;
    height: 100%;
    align-items: center;

    .image-background-container,
    &::before {
      position: absolute;
      width: 100vw;
      right: 0;
      top: 0;
      display: block;
      height: 100%;
      z-index: -1;
      left: 0;
      background: inherit;
      content: "";

      @include media-breakpoint-up(sm) {
        width: 50vw;
      }
    }

    @each $name, $themeSettings in $d-p-side-by-side-image-single_text_block-themes {
      &.theme-#{$name} {
        &::before {
          content: "";
          top: 0;
          right: 0;
          height: 100%;
          width: 100vw;
          position: absolute;
          background-color: map-get($themeSettings, "background");

          @include media-breakpoint-up(sm) {
            width: 50vw;
          }
        }

        .d-media-background-wrapper {
          opacity:$d-p-side-by-side-image-single_text_block-themed-background-opacity;
        }

        .d-p-text-block {
          background-color: transparent;
          z-index: 0;
        }
      }
    }

    .d-p-text-block {
      margin-bottom: 0;
      width: 100%;
      .field--name-field-d-main-title {
        font-size: $font-main-header-size;
      }
    }
  }
  .item-1,
  .item-2 {
    .user-image-background {
      padding: $d-p-side-by-side-image-background-padding-y 0;
      &::before {
        content: none;
      }
      @each $name, $themeSettings in $d-p-side-by-side-image-single_text_block-themes {
        &.theme-#{$name} {
          &::before {
            content: "";
          }
        }
      }
      .image-background-container {
        position: absolute;
        height: 100%;
        min-width: 50vw;
        top: 0;
        left: unset;
        display: block;
        z-index: -1;
        &.background-properties {
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }
    }
    .d-media-background-wrapper {
      z-index: -1;
      @include media-breakpoint-up(sm) {
        width: 50vw;
      }
    }
  }
  .item-1 {
    .user-image-background {
      .image-background-container {
        right: 0;
      }
    }
    @each $name, $themeSettings in $d-p-side-by-side-image-single_text_block-themes {
      .wrapper-d_p_node.theme-#{$name},
      .wrapper-d_p_single_text_block.theme-#{$name} {
        &::before {
          @include media-breakpoint-up(sm) {
            margin-left: calc(100% - 50vw);
          }
        }
      }
    }
    .d-media-background-wrapper {
      @include media-breakpoint-up(sm) {
        margin-left: calc(100% - 50vw);
      }
    }
  }
  .item-2 {
    .user-image-background {
      .image-background-container {
        left: 0;
      }
    }
    @each $name, $themeSettings in $d-p-side-by-side-image-single_text_block-themes {
      .wrapper-d_p_node.theme-#{$name},
      .wrapper-d_p_single_text_block.theme-#{$name} {
        &::before {
          @include media-breakpoint-up(sm) {
            margin-right: calc(100% - 50vw);
          }
        }
      }
    }
    .d-media-background-wrapper {
      @include media-breakpoint-up(sm) {
        margin-right: calc(100% - 50vw);
      }
    }
  }

  .paragraph--type--d-p-node {
    display: flex;
    align-items: center;

    @include media-breakpoint-between(sm, md) {
      margin: 0 $d-p-side-by-side-node-box-margin-x;
    }
  }

  .expandable-content {
    overflow: hidden;
    position: relative;
    z-index: 0;
  }

  .item-1,
  .item-2 {
    div[data-geysir-paragraph-id] {
      position: unset;
      height: 100%;
    }
  }

  .item-1 {
    @include media-breakpoint-up(sm) {
      padding-right: $d-p-side-by-side-content-padding-x;
    }
  }
  .item-2 {
    @include media-breakpoint-up(sm) {
      padding-left: $d-p-side-by-side-content-padding-x;
    }
  }

  .field--name-field-d-long-text {
    p {
      word-wrap: break-word;
      hyphens: auto;
    }
  }
}
