.diagnoses.diagnoses-m1021 {
  .diagnoses-main {
    .cards {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 480px;
    }

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

    .card-inner {
      position: relative;
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      padding: 12px;
      display: flex;
      flex-direction: row;
      gap: 16px;

      &.selected {
        border-color: var(--color-border-selected);
      }

      &.new {
        background-color: var(--color-blue-bright-50);
        border-color: var(--color-blue-bright-200);
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-delay: 5s;

        &:not(.selected) {
          animation-name: diminishNewToRegular;
        }

        &.selected {
          animation-name: diminishNewToSelected;
        }
      }

      .card-input {
        input[type="radio"] {
          accent-color: var(--color-bg-brand-solid);
        }
      }

      .card-main {
        flex: 1;
        display: flex;
        flex-direction: column;

        .card-description {
          margin-top: 6px;
          font-size: var(--font-size-lg);
          color: var(--color-base-black);
        }

        .card-footer {
          display: flex;
          flex-direction: row;
          margin-top: 8px;
          font-size: var(--font-size-xs);
          color: var(--color-text-secondary);

          p {
            font-size: var(--font-size-xs);
            color: var(--color-text-secondary);
          }

          i {
            font-size: 16px;
            margin-right: 4px;
          }

          a {
            margin-left: 8px;
          }
        }
      }

      .card-actions {
        display: flex;
        flex-direction: column;
      }
    }

    .card-outer {
      padding: 20px;
      color: var(--color-text-primary);
      background-color: var(--color-bg-tertiary);
      font-size: var(--font-size-xs);
      font-style: italic;
      line-height: 150%;
    }
  }
}

@keyframes diminishNewToRegular {
  from {
    background-color: var(--color-blue-bright-50);
    border-color: var(--color-blue-bright-200);
  }
  to {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-secondary);
  }
}

@keyframes diminishNewToSelected {
  from {
    background-color: var(--color-blue-bright-50);
    border-color: var(--color-blue-bright-200);
  }
  to {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-selected);
  }
}