$d-blog-listing-header-background-color: $color-agamemnon !default;
$d-blog-listing-header-text-color: $color-odysseus !default;
$d-blog-listing-taxonomy-link-color: $color-penthesilea !default;
$d-blog-border-bottom-color: $color-diomedes !default;
$d-blog-padding-link-color: $color-patroclus !default;

$d-blog-pagination-padding-top: 120px !default;
$d-blog-pagination-padding-bottom: 110px !default;
$d-blog-pagination-font-size: 1.25rem !default;
$d-blog-pagination-padding-between-elements: 1.875rem !default;
$d-blog-pagination-next-prev-element-padding: 1.25rem !default;
$d-blog-pagination-padding-between-pointers: 0.625rem !default;
$d-blog-pagination-border: 2px solid $d-blog-listing-taxonomy-link-color !default;
$d-blog-pagination-margin-bottom: 0 !default;
$d-blog-listing-header-desktop-padding: 7.5rem 0 5.5rem 0 !default;
$d-blog-listing-header-mobile-padding: 4.5rem 0 2.5rem 0 !default;
$d-blog-listing-top-margin: 1.5rem !default;
$d-blog-article-border: 1px solid $d-blog-border-bottom-color !default;

$d-blog-sticky-article-padding-desktop: 0 30px 10px !default;
$d-blog-sticky-article-padding-mobile: 0 30px !default;
$d-blog-sticky-article-margin-bottom: 0 !default;
$d-blog-sticky-article-margin-top: 0 !default;

$d-blog-teaser-margin: 20px 0 !default;
$d-blog-teaser-text-margin-top-desktop: 30px !default;
$d-blog-teaser-text-padding-left: 0 !default;
$d-blog-teaser-text-padding-left-mobile: 30px !default;
$d-blog-margin-between-teaser-mobile: 15px !default;
$d-blog-teaser-blog-post-title-mobile: 1.0625rem !default;
$d-blog-read-article-font-size: 0.9375rem !default;
$d-blog-title-teaser-font-size-desktop: 1.3rem !default;
$d-blog-title-teaser-padding-top-desktop: 18px !default;
$d-blog-listing-header-margin: 0px !default;
$d-blog-teaser-text-padding-desktop-tab: 0 !default;
$d-blog-teaser-text-margin-desktop-tab: 43px 0 !default;
$d-blog-teaser-text-font-size-desktop: 1rem !default;
$d-blog-read-article-margin-top-desktop-tablet: 21px !default;
$d-blog-teaser-image-width-tablet-desktop: 600px !default;
$d-blog-teaser-image-margin-bottom-tablet: 15px !default;
$d-blog-teaser-image-row-padding-desktop: 0 !default;
$d-blog-teaser-title-margin-top-desktop: 100px !default;
$d-blog-teaser-title-padding-desktop: 37px !default;
$d-blog-teaser-title-margin-between-text-decoration-mobile: 0.75rem !default;
$d-blog-teaser-min-height-desktop: 520px !default;
$d-blog-teaser-image-height-desktop: 480px !default;
$d-blog-margin-between-header-and-article-teasers: 1rem !default;
$d-blog-field-type-image-margin: 0 !default;
$d-blog-article-row-min-height: 420px !default;

// Listing header (for main view and taxonomy).
.blog-header-wrapper {
  @include listing-header(
      $d-blog-listing-header-background-color,
      $d-blog-listing-header-text-color,
      $d-blog-listing-header-desktop-padding,
      $d-blog-listing-header-mobile-padding,
      $d-blog-listing-header-margin
  );
}

// Listing view.
.view-blog-listing {
  margin-top: $d-blog-margin-between-header-and-article-teasers;

  .field--type-image {
    margin: $d-blog-field-type-image-margin;
  }

  .pagination-wrapper {
    background-color: $color-troilus;
  }
  @include media-breakpoint-down(lg) {
    .pagination {
      margin-top: $d-blog-listing-top-margin;
    }
  }
  @include media-breakpoint-down(xs) {
    .pagination {
      li {
        &.page-item {
          display: none;
        }
        &.active, &.pager__item--next, &.pager__item--last, &.pager__item--previous, &.pager__item--first {
          display: inline;
        }
      }
    }

    .desktop-tablet {
      display: none;
    }
  }

  @include media-breakpoint-up(sm) {
    .mob-only {
      display: none;
    }
  }
}

.field--name-field-blog-teaser {
  p {
    margin: $d-blog-teaser-margin;
  }
}

.article-wrapper {
  border-bottom: $d-blog-article-border;

  @include media-breakpoint-only(xl) {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.node--view-mode-teaser.node--type-blog-post {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
  .field--name-field-blog-category {
    display: inline;
    .field__item {
      display: inline;
      @include add-commas-to-elements;
    }
  }

  &.node--sticky {
    padding: $d-blog-sticky-article-padding-desktop;
    @include media-breakpoint-down(sm) {
      padding: $d-blog-sticky-article-padding-mobile;
      margin-bottom: $d-blog-sticky-article-margin-bottom;
      margin-top: $d-blog-sticky-article-margin-top;
      border: none;
    }
  }

  .node_blog_post_title {
    text-align: left;
    padding-left: $d-blog-teaser-text-padding-left;
    word-wrap: break-word;

    &::after {
      @include decoration-header-line;
    }
  }

  .node__meta {
    margin-top: $d-blog-teaser-text-margin-top-desktop;
    padding-left: $d-blog-teaser-text-padding-left;
    color: $d-blog-listing-taxonomy-link-color;
    a {
      color: $d-blog-listing-taxonomy-link-color;
    }
  }
  .nav-link {
    padding-left: $d-blog-teaser-text-padding-left;
  }

  .node-readmore {
    text-transform: uppercase;
  }

  .title-row {
    display: none;
  }

  @include media-breakpoint-down(sm) {
    .title-row-for-mobile {
      padding-left: $d-blog-teaser-text-padding-left-mobile;
    }

    .node-readmore {
      margin-bottom: $d-blog-margin-between-teaser-mobile;
      font-size: $d-blog-read-article-font-size;
    }

    .node_blog_post_title {
      //because German language and long words
      font-size: $d-blog-teaser-blog-post-title-mobile;

      &::after {
        margin-top: $d-blog-teaser-title-margin-between-text-decoration-mobile;
      }
    }
  }

  @include media-breakpoint-up(sm) {
    .article-row {
      min-height: $d-blog-article-row-min-height;
    }

    .node_blog_post_title {
      padding-top: $d-blog-title-teaser-padding-top-desktop;
      font-size: $d-blog-title-teaser-font-size-desktop;
      a {
        font-size: inherit;
        span {
          display: block;
        }
      }
    }

    .node__content {
      padding: $d-blog-teaser-text-padding-desktop-tab;
      margin: $d-blog-teaser-text-margin-desktop-tab;
    }

    .field--name-field-blog-teaser {
      p {
        font-size: $d-blog-teaser-text-font-size-desktop;
      }
    }

    .inline__links {
      margin-top: $d-blog-read-article-margin-top-desktop-tablet
    }

    .field--name-field-blog-media-main-image {
      img {
        width: $d-blog-teaser-image-width-tablet-desktop;
        object-fit: cover;
        font-family: 'object-fit: cover;';
      }
    }
  }

  @include media-breakpoint-between(md, xl) {
    .field--name-field-blog-media-main-image {
      margin-bottom: $d-blog-teaser-image-margin-bottom-tablet;
    }
  }

  @include media-breakpoint-up(xl) {
    .title-row-for-mobile {
      display: none;
    }

    .blog-main-image-row {
      padding-right: $d-blog-teaser-image-row-padding-desktop;
    }

    .title-row {
      display: block;
      margin-top: $d-blog-teaser-title-margin-top-desktop
    }

    .article-row {
      min-height: $d-blog-teaser-min-height-desktop;
    }

    .node_blog_post_title {
      padding-top: $d-blog-teaser-title-padding-desktop
    }

    .node__content {
      padding: 0;
      margin: $d-blog-teaser-text-margin-desktop-tab;
    }

    .field--name-field-blog-teaser {
      p {
        margin: $d-blog-teaser-text-margin-desktop-tab;
      }
    }

    .field--name-field-blog-media-main-image {
      img {
        height: $d-blog-teaser-image-height-desktop
      }
    }
  }
}
