@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/type";

$medium: $ca-grid * 1.25;
$small: $ca-grid;

.root {
  @include ca-type-ideal-small-bold;
  @include ca-inherit-baseline;
  @include ca-margin($end: $ca-grid * 0.5);
  color: $kz-color-wisteria-800;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: $ca-grid * 0.75;
  padding: 0 $ca-grid * 0.4;
  cursor: default;
}

.layoutContainer {
  height: 100%;
  display: flex;
  align-items: center;
}

.validationIcon {
  @include ca-margin($start: -$ca-grid * 0.15, $end: $ca-grid * 0.125);
  display: flex;
  align-items: center;
}

.textContent {
  @include ca-type-ideal-small-bold;
  @include ca-inherit-baseline;
}

.dismissIcon {
  @include ca-margin($end: -$ca-grid * 0.15, $start: $ca-grid * 0.125);
  color: $kz-color-wisteria-600;
  height: $ca-grid * 0.6;
  cursor: pointer;

  &:hover {
    color: $kz-color-wisteria-700;
  }

  &:active {
    color: $kz-color-wisteria-800;
  }
}

.truncate {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}

.inline {
  margin: 0;
}

.medium {
  height: $medium;
}

.small {
  height: $small;
}

.default {
  background-color: $kz-color-wisteria-200;

  &:hover {
    border-color: $kz-color-wisteria-300;
  }
}

.sentimentPositive {
  background-color: $kz-color-seedling-100;

  &:hover {
    border-color: $kz-color-seedling-200;
  }
}

.sentimentNeutral {
  background-color: $kz-color-ash;

  &:hover {
    border-color: $kz-color-wisteria-300;
  }
}

.sentimentNegative {
  background-color: $kz-color-coral-100;

  &:hover {
    border-color: $kz-color-coral-300;
  }
}

.sentimentNone {
  background-color: $kz-color-white;
  border-color: $kz-color-wisteria-300;

  &:hover {
    border-color: $kz-color-wisteria-500;
  }
}

.validationPositive {
  background-color: $kz-color-seedling-100;
  border-color: $kz-color-seedling-200;

  &:hover {
    border-color: $kz-color-seedling-300;
  }

  .validationIcon {
    color: $kz-color-seedling-500;
  }
}

.validationInformative {
  background-color: $kz-color-cluny-100;
  border-color: $kz-color-cluny-200;

  &:hover {
    border-color: $kz-color-cluny-300;
  }

  .validationIcon {
    color: $kz-color-cluny-500;
  }
}

.validationNegative {
  background-color: $kz-color-coral-100;
  border-color: $kz-color-coral-200;

  &:hover {
    border-color: $kz-color-coral-300;
  }

  .validationIcon {
    color: $kz-color-coral-500;
  }
}

.validationCautionary {
  background-color: $kz-color-yuzu-100;
  border-color: $kz-color-yuzu-400;

  &:hover {
    border-color: $kz-color-yuzu-500;
  }

  .validationIcon {
    color: $kz-color-yuzu-500;
  }
}

.statusLive {
  background-color: $kz-color-seedling-100;
  border-color: $kz-color-seedling-100;
  color: $kz-color-wisteria-800;
}

.statusDraft {
  background-color: add-alpha($kz-color-peach-500, 20%);
  border-color: $kz-color-peach-100;
  color: $kz-color-wisteria-800;
}

.statusClosed {
  background-color: $kz-color-wisteria-200;
  border-color: $kz-color-wisteria-200;
}

.statusAction {
  background-color: $kz-color-cluny-100;
  border-color: $kz-color-cluny-100;
  color: $kz-color-wisteria-800;
}

$pulse-size-initial: 2px;
$pulse-scale-factor: 9;
$pulse-size-after: $pulse-size-initial * $pulse-scale-factor;

.pulse {
  @include ca-margin($start: $ca-grid * 0.35, $end: $ca-grid * 0.15);
  width: $pulse-size-initial;
  height: $pulse-size-initial;
  border-radius: 50%;
  background-color: $kz-color-cluny-500;
  display: inline-block;
  position: relative;
  opacity: 0.5;
}

.pulseRing {
  position: absolute;
  width: $pulse-size-after;
  height: $pulse-size-after;
  // this positioning has to be calculated as an exact value as scaling will mess with percentage values
  left: -($pulse-size-after / 2) + ($pulse-size-initial / 2);
  top: -($pulse-size-after / 2) + ($pulse-size-initial / 2);
  border-radius: 50%;
  background-color: $kz-color-seedling-500;
  animation: pulsate infinite 2.5s ease-out;
}

@keyframes pulsate {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}