@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/responsive";

// override Murmur global styles :(
.header h1 {
  color: $kz-color-white;
}

.modal {
  composes: genericModal from "../Primitives/GenericModal.scss";
  min-width: 300px;
  max-width: 600px;
}

.elmModal {
  min-width: 300px;
  max-width: 600px;
}

.header {
  color: $kz-color-white;
  padding: $ca-grid $ca-grid $ca-grid * 1.5;
  text-align: center;
  background-repeat: no-repeat;
}

.positiveHeader {
  background-color: $kz-color-seedling-400;

  @include ca-media-tablet-and-up {
    background-image: url("../backgrounds/brush-positive.png");
    background-position: -60% 70%;
  }
}

.informativeHeader {
  background-color: $kz-color-cluny-500;

  @include ca-media-tablet-and-up {
    background-image: url("../backgrounds/brush-informative.png");
    background-size: 65%;
    background-position: bottom right;
  }
}

.negativeHeader {
  background-color: $kz-color-coral-400;

  @include ca-media-tablet-and-up {
    background-image: url("../backgrounds/brush-negative.png");
    background-size: 64%;
    background-position: top right;
  }
}

.cautionaryHeader {
  background-color: $kz-color-yuzu-500;

  &.header h1 {
    color: $kz-color-wisteria-800;
  }
}

.iconContainer {
  height: 150px;
  width: 150px;
  position: relative;
  margin: 0 auto $ca-grid * 0.5;
}

.iconBackground {
  width: 150px;

  > circle {
    fill: rgba($kz-color-white, 0.1);
  }
}

.icon {
  @include ca-position($top: 30px, $start: 30px);
  position: absolute;

  > svg {
    width: 90px;
    height: 90px;
  }
}