.diagnoses {
  .diagnoses-sidebar {
    .title {
      color: var(--color-base-black);
      text-transform: uppercase;
      font-size: var(--font-size-xs);
      font-weight: var(--weight-bold);
    }

    .hint {
      margin-top: 16px;
      line-height: 150%;
      font-size: var(--font-size-sm);
      font-weight: var(--weight-light);
      font-style: italic;
      color: var(--color-text-primary);
    }

    .diagnoses-primary-tabs {
      display: flex;
      border-bottom: 1px solid var(--color-border-primary);
      gap: 8px;

      .tab-item {
        color: var(--color-text-quaternary);
        text-transform: uppercase;
        line-height: 150%;
        font-size: var(--font-size-xs);
        font-weight: var(--weight-semi-bold);
        flex: 1;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          color: var(--color-text-primary);
          border-bottom: 2px solid var(--color-fg-primary);
        }
      }
    }

    .diagnoses-secondary-tabs {
      display: flex;
      border-bottom: 1px solid var(--color-border-primary);
      gap: 16px;
      margin-top: 16px;

      .tab-item {
        color: var(--color-text-primary);
        line-height: var(--line-height-text-sm);
        font-size: var(--font-size-sm);
        font-weight: var(--weight-regular);
        flex: 1;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          font-weight: var(--weight-bold);
          border-bottom: 3px solid var(--color-fg-tertiary);
        }
      }
    }

    .cards {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .card {
      padding: 12px;
      background-color: var(--color-bg-primary);
      border-radius: var(--border-radius-md);
      border: 1px solid var(--color-border-secondary);

      &.big {
        padding: 12px 24px;
      }

      &.active {
        border-color: var(--color-fg-quaternary);
      }

      .card-title {
        color: var(--color-text-primary);
        font-size: var(--font-size-sm);
        font-weight: var(--weight-regular);
        line-height: var(--line-height-text-sm);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        &.big {
          font-size: var(--font-size-md);
          font-weight: var(--weight-bold);
          line-height: 150%;
        }
      }

      .card-body {
        margin-top: 4px;
        border-top: 1px solid var(--color-border-secondary);

        .count {
          margin-top: 12px;
          font-size: var(--font-size-xxs);
          color: var(--color-text-secondary);
        }

        .quotes {
          margin-top: 12px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .quote {
          font-size: var(--font-size-xs);
          line-height: var(--line-height-text-xs);

          p {
            color: var(--color-text-secondary);
            font-style: italic;

            &:before {
              content: "“";
            }

            &:after {
              content: "”";
            }
          }

          a {
            margin-top: 4px;
          }
        }
      }

      .card-section {
        margin-top: 16px;

        .card-section-title {
          font-size: var(--font-size-sm);
          font-weight: var(--weight-bold);
          line-height: var(--line-height-text-sm);
          color: var(--color-text-primary);
        }

        .quotes {
          margin-left: 8px;
          margin-top: 8px;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .quote {
            font-size: var(--font-size-xs);
            line-height: var(--line-height-text-xs);
            display: flex;
            flex-direction: column;
            gap: 4px;

            &.highlighted {
              p {
                background-color: var(--color-bg-text-highlighted);
              }
            }

            p {
              color: var(--color-text-secondary);
              font-style: italic;

              &:before {
                content: "“";
              }

              &:after {
                content: "”";
              }
            }
          }
        }
      }
    }
  }
}