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

$comp-ref-box-pd: $space-sm !default;
$comp-ref-box-bc: $white !default;
$comp-ref-box-col: $col-text !default;
$comp-ref-box-br: 16px !default;
$comp-ref-box-bs: 0px 4px 16px 0px #1c245e26 !default;

.component-references {
  .row {
    align-items: center;
  }
  .references-slider {
    padding: 1rem 1.6rem $space-md;
    .reference-box {
      padding: $comp-ref-box-pd;
      background-color: $comp-ref-box-bc;
      border-radius: $comp-ref-box-br;
      box-shadow: $comp-ref-box-bs;
      color: $comp-ref-box-col;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .content-box {
        h4 {
          margin-bottom: $space-xs;
        }
      }
      .author-box {
        display: flex;
        align-items: center;
        .author-image {
          flex: 1 0 48px;
          max-width: 48px;
          margin-right: $space-xs;
          picture img {
            border-radius: 100px;
          }
        }
        .author-content {
          .small {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .dots {
    .dot {
      background-color: $gray200;
      &.active {
        background-color: $col-prm;
      }
    }
  }
}
