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

.base {
  background-color: $kz-color-wisteria-100;
  border-radius: $ca-border-radius * 3;
  position: relative;
  top: $ca-grid * 0.175;
  margin-bottom: $ca-grid * 0.5;
}

@keyframes fadeInOut {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.animated {
  animation-name: fadeInOut;
  animation-duration: $ca-duration-deliberate * 2;
  animation-iteration-count: infinite;
}

.centered {
  margin-left: auto;
  margin-right: auto;
}

.reversedDefault {
  background-color: rgba($kz-color-white, 0.5);
}

.reversedOcean {
  background-color: $kz-color-cluny-300;
}

.normal {
  height: $ca-grid * 0.625;
}

.tall {
  top: $ca-grid * 0.25;
  height: $ca-grid * 0.725;
}

.inline {
  display: inline-block;
  margin-bottom: $ca-grid * 0.35;
}

.inline + .inline {
  @include ca-margin($start: $ca-grid);
}

.noBottomMargin {
  margin-bottom: 0;
}

// We double the class selector to increase specificity above rules like `h1.default-style`
.inheritBaseline.inheritBaseline {
  @include ca-inherit-baseline;
}