DS2 Hero banner: Image Then Content

.ds2-banner {
  --ds2-bannerSpacing: 48px;
  --ds2-bannerMinHeight: 500px;
  --ds2ContentMaxWidth: 1500px;
  --ds2ImageContentImageMaxSize: 40%; // need to make this percentage configurable for different use cases

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: var(--ds2-bannerMinHeight);

  .ds2-banner__single {
    display: flex;
    width: 100%;
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  

  .ds2-banner__content {
    // width: calc(100% - 2 * var(--ds2-bannerSpacing));
    max-width: calc(var(--ds2ContentMaxWidth) - 2 * var(--ds2-bannerSpacing));
    margin: 0 var(--ds2-bannerSpacing);
    margin: 0;
    position: absolute;
    place-self: center; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;

    .ds2ContentBlockUolLogo svg {
      fill: white;
    }
  }
}

// variant with image to left and content to left
.ds2-banner--image-then-content {
  
  
  .ds2-banner__single {
    width: var(--ds2ImageContentImageMaxSize);
    height: 100%;
    position: absolute;
    left: 0;
  }

  .ds2-banner__content {
    position: relative;
    width: calc(100% - var(--ds2ImageContentImageMaxSize) - 2 * var(--ds2-bannerSpacing));

    * {
      max-width: calc(1440px / 2 - 2 * var(--ds2-bannerSpacing));
    }

    padding: var(--ds2-bannerSpacing);
    padding-left: calc(var(--ds2ImageContentImageMaxSize) + var(--ds2-bannerSpacing));
    
  }

  .ds2-bannerNavContainer {
    left: calc(var(--ds2ImageContentImageMaxSize) - 100px - var(--ds2-bannerSpacing));
  }
}

// variant with image to right and content to left
.ds2-banner--content-then-image {
  --ds2ImageContentImageMaxSize: 50%;
  
  .ds2-banner__single {
    width: var(--ds2ImageContentImageMaxSize);
    height: 100%;
    position: absolute;
    right: 0;
  }

  .ds2-banner__content {
    // background: grey;
    position: absolute;
    width: calc(var(--ds2ImageContentImageMaxSize) - 2 * var(--ds2-bannerSpacing));
    max-width: calc(1440px / 2 - 2 * var(--ds2-bannerSpacing));
    // padding: var(--ds2-bannerSpacing);
    right: calc(50% + var(--ds2-bannerSpacing));
    
  }

  .ds2-bannerNavContainer {
    left: calc(var(--ds2ImageContentImageMaxSize) - 100px - var(--ds2-bannerSpacing));
  }
}

// Colours
.ds2-banner--overlay {
  .ds2BrandButton {
    background: $color-brand-white;
    color: $color-brand-black;
    border: 1px solid $color-brand-white;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $color-blue;
    background: $color-blue;
    color: $color-brand-white;
  }
}

.ds2-banner--cream {
  background-color: rgba($color-brand-cream, 0.4);
  color: $color-brand-black;
  svg {
    fill: $color-brand-black;
  }
  .ds2BrandButton {
    background-color: rgba($color-brand-cream, 0);
    color: $color-brand-black;
    border: 1px solid $color-brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $color-brand-black;
    background: $color-brand-black;
    color: $color-brand-white;
  }
}

.ds2-banner--Teal {
  background: $color-brand-teal;
  color: $color-brand-black;
  svg {
    fill: $color-brand-black;
  }
  .ds2BrandButton {
    background: $color-brand-teal;
    color: $color-brand-black;
    border: 1px solid $color-brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $color-blue;
    background: $color-blue;
    color: $color-brand-white;
  }
}

.ds2-banner--Blue {
  background: $color-brand-light-blue;
  color: $color-brand-white;
  svg {
    fill: $color-brand-white;
  }
  .ds2BrandButton {
    background: $color-brand-light-blue;
    color: $color-brand-white;
    border: 1px solid $color-brand-white;
  }
  .ds2BrandButton:first-of-type {
    background: $color-brand-white;
    color: $color-brand-black;
    border: 1px solid $color-brand-white;
  }
}

.ds2-banner--DarkBlue {
  background: $color-blue;
  color: $color-brand-white;
  svg {
    fill: $color-brand-white;
  }
  .ds2BrandButton {
    background: $color-blue;
    color: $color-brand-white;
    border: 1px solid $color-brand-white;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $color-brand-white;
    background: $color-brand-white;
    color: $color-brand-black;
  }
}

.ds2-banner--White {
  background: $color-brand-white;
  color: $color-brand-black;
  svg {
    fill: $color-brand-white;
  }
  .ds2BrandButton {
    background: $color-brand-white;
    color: $color-brand-black;
    border: 1px solid $color-brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $color-blue;
    background: $color-blue;
    color: $color-brand-white;
  }
}

.ds2-banner--VividGreen {
  background: $color-brand-vivid-green;
  color: $color-brand-black;
  svg {
    fill: $color-brand-black;
  }
  .ds2BrandButton {
    background: $color-brand-vivid-green;
    color: $color-brand-black;
    border: 1px solid $color-brand-black;
  }
  .ds2BrandButton:first-of-type {
    border: 1px solid $color-brand-black;
    background: $color-brand-black;
    color: $color-brand-white;
  }
}

.ds2-template-main {
  .ds2-banner--image-then-content, .ds2-banner--content-then-image {
    --ds2ImageContentImageMaxSize: 50%;
  }
}

// variant styles

/*
Default
FullBannerOverlay
Whole background has opacity applied
*/
.ds2-banner--FullBannerOverlay {
  background: rgba(0, 0, 0, 0.40);

  .ds2-banner__content {
    max-width: calc(var(--ds2ContentMaxWidth) - 2 * var(--ds2-bannerSpacing));
    margin: 0 var(--ds2-bannerSpacing);
    margin: 0;
    position: absolute;
    place-self: center; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    // left aligns content block
    left: var(--ds2-bannerSpacing);
    @media all and (min-width: 1500px) {
      left: calc((100% - var(--ds2ContentMaxWidth)) / 2);
    }
    

    .ds2ContentBlockUolLogo svg {
      fill: white;
    }
  }
}

/*
ContentBlockOverlay
Content on banner is in a floating box to the left
Background has 40% opacity black and blur filter
*/
.ds2-banner--ContentBlockOverlay {
  .ds2-banner__content {
    max-width: calc(var(--ds2ContentMaxWidth) - 2 * var(--ds2-bannerSpacing));
    margin: var(--ds2-bannerSpacing);
    position: absolute;
    
    // left aligns content block
    left: 0;
    @media all and (min-width: 1500px) {
      left: calc((100% - var(--ds2ContentMaxWidth)) / 2);
    }

    // padding around banner height means height needs to be adjusted accordingly
    height: calc(100% - 2 * var(--ds2-bannerSpacing)); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(17.6px);
    border-radius: 24px;
    padding: 0 var(--ds2-bannerSpacing);
  }
}