/*
Components Image Side Banner

Styleguide 2.image-slide-banner

*/

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

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

.theme-default {
  .paragraph--type--d-p-side-image {
    color: $d-p-side-image-banner-text-color;

    .field--name-field-d-main-title {
      color: $d_p_side-image-header-color;
    }

    .field--name-field-d-long-text {
      p {
        color: $d-p-side-image-color;
      }
    }

    .image-side {
      &-right,
      &-right-wide {
        background: $d-p-side-image-banner-background-color;
      }

      &-left,
      &-left-wide {
        background: $d-p-side-image-banner-background-color-secondary;
      }
    }

    a:not(.btn) {
      color: $d-p-side-image-banner-link-color;
      &:hover {
        color: $d-p-side-image-banner-link-hover-color;
      }
    }
  }
}

// Override default values.
.padding-top-default {
  .paragraph {
    &.paragraph--type--d-p-side-image {
      .content-inside-wrapper {
        padding-top: $d-p-side-image-banner-text-padding;
      }
    }
  }
}
.padding-bottom-default {
  .paragraph {
    &.paragraph--type--d-p-side-image {
      .content-inside-wrapper {
        padding-bottom: $d-p-side-image-banner-text-padding;
      }
    }
  }
}

.paragraph--type--d-p-side-image {
  .field--name-field-d-main-title {
    @include font-main-header;
    text-align: left;

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

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

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

  .d-image {
    padding: 0;
    @include media-breakpoint-down(sm) {
      height: $d-p-side-image-mobile-height !important;
      position: relative !important;
    }
  }

  @include media-breakpoint-up(md) {
    .d-image {
      position: absolute !important;
    }
    .image-side {
      &-right,
      &-right-wide {
        .d-image {
          right: 0;
        }
        .container-half {
          padding-right: $d-p-side-image-banner-half-padding;
        }
      }
      &-left,
      &-left-wide {
        .d-image {
          left: 0;
        }
        .container-half {
          padding-left: $d-p-side-image-banner-half-padding;
        }

        .content-inside-wrapper {
          margin-left: auto;
        }
      }
      &-left-wide,
      &-right-wide {
        .content-inside-wrapper {
          padding-top: 2 * $d-p-side-image-banner-text-padding;
          padding-bottom: 2 * $d-p-side-image-banner-text-padding;
        }
      }
      &-left-wide {
        .container-half {
          padding-left: 1.5 * $d-p-side-image-banner-text-padding;
        }
      }
      &-right-wide {
        .container-half {
          padding-right: 1.5 * $d-p-side-image-banner-text-padding;
        }
      }
    }
  }
}

.user-background-defined {
  .image-side {
    &-left,
    &-right {
      &, &-wide {
        background: none;
      }
    }
  }
}
