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

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: $ca-grid;
  padding-right: $ca-grid;
  background-color: $kz-color-ash;
  color: $kz-color-wisteria-800;
  border: 1px solid $ca-border-color;
  border-radius: $ca-border-radius;

  @include small {
    flex-direction: column;
    align-items: center;
    padding-top: $ca-grid;
    padding-bottom: $ca-grid;
  }

  &.straightCorners {
    border-radius: 0;
  }

  // These class names must match the possible values of the component's layoutContext prop
  &.sidebarAndContent {
    @include large-sidebar-and-content {
      max-width: $large;
      padding-top: $ca-grid;
      padding-bottom: $ca-grid;
    }
  }

  &.contentOnly {
    @include large-content-only {
      max-width: $large;
      padding-top: $ca-grid;
      padding-bottom: $ca-grid;
    }
  }
}

.illustrationSide,
.textSide {
  display: inline-block;
}

.illustrationSide {
  min-width: 224px;
  flex-grow: 0;
  flex-shrink: 1;
  margin-bottom: $ca-grid;

  @include small {
    width: 224px;
  }

  @include medium {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    min-width: 40%;
    max-width: 50%;
    flex-grow: 1;
    flex-basis: 50%;
    padding-left: 7%;
    padding-right: 8%;
  }

  .sidebarAndContent & {
    @include large-sidebar-and-content {
      flex-shrink: 1;
      flex-basis: auto;
    }
  }

  .contentOnly & {
    @include large-content-only {
      flex-shrink: 1;
      flex-basis: auto;
    }
  }
}

.illustration {
  max-width: 100%;

  // Fixes for IE11 Flexbox issues
  min-height: 224px;

  @include small {
    max-height: 224px;
  }
}

.textSide {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  align-items: center;
  -webkit-font-smoothing: antialiased;
}

.textSideInner {
  flex-grow: 0;
  height: auto;
  margin: $ca-grid / 2;

  @include small {
    text-align: center;
    margin-bottom: 0;
  }

  @include medium {
    max-width: 460px;
  }
}

.heading {
  @include ca-type-ideal-display;
  margin-bottom: $ca-grid;

  .sidebarAndContent & {
    @include large-sidebar-and-content {
      @include ca-type-ideal-title;
    }
  }

  .contentOnly & {
    @include large-content-only {
      @include ca-type-ideal-title;
    }
  }
}

.description {
  @include ca-type-ideal-lede;
  margin-bottom: $ca-grid;

  .sidebarAndContent & {
    @include small {
      @include ca-type-ideal-body;
    }
  }

  .contentOnly & {
    @include small {
      @include ca-type-ideal-body;
    }
  }
}