.tasks {
  display: flex;
  flex-direction: column;
}

.task {
  background-color: hsl(292, 32%, 95%);
  border-radius: var(--border-radius-large);
  box-sizing: border-box;
  cursor: pointer;
  padding: var(--spacing);
  position: relative;
  width: 640px;

  &.task--open {
    background-color: hsl(292, 32%, 90%);
  }

  &:not(:first-of-type) {
    margin-block-start: calc(var(--spacing-large) + var(--spacing-small));
  }

  &:hover {
    background-color: hsl(292, 32%, 90%);
  }
}

.task:not(:first-of-type)::after {
  bottom: 0;
  border-radius: var(--border-radius);
  background-color: hsl(292, 32%, 80%);
  content: "";
  height: var(--spacing-large);
  left: calc(
    50% + (var(--task-connection-width) / 2) -
      (var(--task-connection-width) / 2)
  );
  max-width: 100%;
  position: absolute;
  top: calc((var(--spacing-large) * -1) - var(--spacing-tiny));
  width: var(--task-connection-width);
  z-index: 1;
}

.task__icon {
  background-color: var(--color-white);
  border-radius: var(--border-radius-round);
  box-sizing: border-box;
  color: var(--color-primary);
  padding: var(--spacing-tiny);
  position: absolute;
  right: calc(var(--spacing-small) * -1);
  top: calc((var(--spacing-small)) * -1);

  svg {
    height: 24px;
    stroke-width: 1.5;
    width: 24px;
  }

  &.task__icon--failed {
    color: var(--color-danger);
  }
}

.task__label {
  color: var(--color-primary);
  text-align: center;
}

.task__description {
  background-color: var(--color-white);
  border-radius: var(--border-radius-large);
  display: none;
  font-size: var(--font-size-small);
  margin-block-start: var(--spacing);
  padding: var(--spacing-small);

  .task--open & {
    display: flex;
  }
}