@import "variables";
@import "mixins";

$comp-cta-box-pd: $space-sm !default;
$comp-cta-box-iw: 50% !default;
$comp-cta-box-mhead: 0 0 $space-sm 0 !default;
$comp-cta-box-mtext: 0 0 $space-sm 0 !default;
$comp-cta-box-mbtns: 0 15px 15px 0 !default;
$comp-cta-box-d-c: $white !default;
$comp-cta-box-d-bg: $col-prm-d !default;
$comp-cta-box-l-c: $black !default;
$comp-cta-box-l-bg: $col-prm-l !default;

.component-cta-box {
  .cta-box {
    display: flex;
    flex-direction: row;
    @include bp("sm") {
      flex-wrap: wrap;
      flex-direction: column-reverse;
    }
    &.switch-sides {
      flex-direction: row-reverse;
      @include bp("sm") {
        flex-direction: column-reverse;
      }
    }
    .cta-box-content {
      background-color: $comp-cta-box-d-bg;
      padding: $comp-cta-box-pd;
      color: $comp-cta-box-d-c;
      h2 {
        margin: $comp-cta-box-mhead;
      }
      p {
        margin: $comp-cta-box-mtext;
      }
      .buttons-wrap {
        a {
          margin: $comp-cta-box-mbtns;
          @include bp("sm") {
            display: block;
            width: 100%;
            text-align: center;
          }
        }
      }
      @include bp("md") {
        padding: $space-md;
      }
      @include bp("sm") {
        flex: 1 0 100%;
        max-width: 100%;
        padding: $space-xs;
      }
    }
    .cta-box-image {
      flex: 1 0 $comp-cta-box-iw;
      max-width: $comp-cta-box-iw;
      @include bp("sm") {
        flex: 1 0 100%;
        max-width: 100%;
        min-height: 400px;
      }
    }
  }
  &.light {
    .cta-box-content {
      background-color: $comp-cta-box-l-bg;
      color: $comp-cta-box-l-c;
    }
  }
}
