/* Components :: Banner :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-banner {
  @include fabric-size(100%);

  background-color: fabric-color('white');
  color: fabric-choose-contrast-color(white);

  // Background Colours
  @each $fabric-key, $fabric-value in $fabric-colors {
    &--#{$fabric-key} {
      color: fabric-choose-contrast-color($fabric-value);

      > * {
        position: relative;
        z-index: 1;
      }

      &:before {
        @include fabric-size(100%);
        @include absolute(top 0 left 0);
        background-color: $fabric-value;
        content: '';
        display: block;
      }
      @each $fabric-key, $fabric-value2 in $fabric-opacities {
        &.u-fabric-opacity--l#{$fabric-key}:before {
          background-color: rgba($fabric-value, $fabric-value2);
        }
      }
    }
  }

  @each $fabric-key, $fabric-value2 in $fabric-opacities {
    .u-fabric-opacity--l#{$fabric-key} {
      opacity: $fabric-value2;
    }
  }

  // Text Overlay
  &__text-overlay {
    @include fabric-size(100%);
    display: grid;
    z-index: 2;

    &--imagify {
      position: absolute;
    }
  }

  // Text Content Block
  &__content-block {
    position: relative;
    > *:last-child {
      margin: 0;
    }
  }

  // Image
  &__image {
    grid-row: row;
  }
}