//
// CivicTheme Banner component styles.
//

.ct-banner {
  $root: &;

  position: relative;

  #{$root}__wrapper {
    position: relative;
  }

  #{$root}__inner {
    @include ct-background();

    & {
      padding-top: ct-spacing(3);
      padding-bottom: ct-spacing(10);
    }

    @include ct-print() {
      padding-top: ct-spacing(2);
      padding-bottom: ct-spacing(3);
    }
  }

  #{$root}__content-below {
    margin-top: ct-spacing(2);
  }

  #{$root}__featured-image__wrapper {
    @include ct-image-fit();

    & {
      box-sizing: border-box;
      width: var(--ct-banner-featured-image-width);
      display: none;
    }

    @include ct-breakpoint(m) {
      display: block;
      position: absolute;
      bottom: 0;
      top: 0;
      right: 0;
    }
  }

  &#{$root}--decorative {
    #{$root}__inner {
      clip-path: var(--ct-banner-decorative-mobile-clip-path);

      @include ct-breakpoint(m) {
        padding-top: ct-spacing(8);
        padding-bottom: ct-spacing(8);
        clip-path: var(--ct-banner-decorative-desktop-clip-path);
      }

      @include ct-print() {
        padding-top: ct-spacing(2);
        padding-bottom: ct-spacing(3);
      }
    }

    #{$root}__content-below {
      margin-top: -1 * ct-spacing(2);
    }

    #{$root}__featured-image__wrapper {
      @include ct-breakpoint(m) {
        bottom: 0;
        top: auto;
        height: 100%;
        max-height: ct-particle(75);
        padding-top: ct-spacing(8);
      }
    }

    #{$root}__featured-image {
      clip-path: var(--ct-banner-featured-image-clip-path);
    }
  }

  #{$root}__breadcrumb {
    margin-bottom: ct-spacing(4);

    @include ct-breakpoint(m) {
      margin-bottom: ct-spacing(6);
    }
  }

  #{$root}__site-section {
    margin-bottom: ct-spacing(2);
  }

  #{$root}__title {
    margin-bottom: ct-spacing(2);

    @include ct-breakpoint(m) {
      margin-bottom: ct-spacing(3);
    }
  }

  @include ct-component-theme($root) using($root, $theme) {
    #{$root}__inner {
      @include ct-component-property($root, $theme, background-color);
    }

    &#{$root}--decorative {
      #{$root}__featured-image__wrapper {
        @include ct-breakpoint(m) {
          @include ct-image-shadow(ct-component-var($root, $theme, featured-image, shadow-color), 'up-left');
        }
      }
    }
  }
}
