@import '~src/style/modules.scss';

.last-run-task-status {
  width: 30px;
  height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-color: rgba($g5-pepper, 0.5);
  border-radius: 50%;
  transition: color 0.25s ease, text-shadow 0.25s ease;

  &.last-run-task-status__danger {
    color: $c-curacao;

    .cf-resource-card__disabled & {
      color: mix($c-curacao, $g8-storm, 60%);
    }

    &.last-run-task-status__highlight {
      color: $c-dreamsicle;
      text-shadow: 0 0 4px $c-fire;
    }
  }

  &.last-run-task-status__success {
    color: $c-rainforest;

    .cf-resource-card__disabled & {
      color: mix($c-rainforest, $g8-storm, 60%);
    }

    &.last-run-task-status__highlight {
      color: $c-honeydew;
      text-shadow: 0 0 4px $c-viridian;
    }
  }

  &.last-run-task-status__warning {
    color: $c-pineapple;

    .cf-resource-card__disabled & {
      color: mix($c-pineapple, $g8-storm, 60%);
    }

    &.last-run-task-status__highlight {
      color: $c-thunder;
      text-shadow: 0 0 4px $c-topaz;
    }
  }
}

.last-run-task-status--popover .cf-popover--contents {
  max-width: 300px;
  padding: $ix-marg-b $ix-marg-b + $ix-marg-a;
  font-size: 13px;
  font-family: $cf-code-font;

  > h6 {
    margin-top: 0;
  }

  > p {
    margin-bottom: 0;
  }
}
