.new-ui {
  flex: 1;
  font-family: 'Inter', sans-serif;

  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px;
  color: var(--color-text-secondary);

  .page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 24px;

    .page-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--color-text-secondary);
      flex: 1;
    }

    .page-actions {
      flex: 0;
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
    }
  }

  .page-description {
    font-size: 17px;
    color: var(--color-text-tertiary);
  }

  .list {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;

    &.compact {
      gap: 0;

      .section-title {
        font-size: 16px;
        padding-bottom: 12px;
      }

      .item {
        border: 0;
        border-radius: 0;
        padding: 15px 20px;

        &:not(:last-child) {
          border-bottom: 1px solid var(--color-border-secondary);
        }

        .item-main {
          gap: 12px;

          .title {
            .name {
              font-size: 16px;
            }
          }
        }
      }
    }

    .empty {
      font-style: italic;
      opacity: 0.7;
      flex: 1;
      text-align: center;
      font-size: 14px;

      &.with-button {
        opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
    }

    .section-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--color-text-secondary);
      padding-top: calc(32px - 12px);

      &:first-child {
        padding-top: 0;
      }
    }

    .item {
      display: flex;
      flex-direction: row;
      min-width: fit-content;
      flex-wrap: wrap;
      gap: 12px;
      padding: 20px;
      background-color: white;
      border: 1px solid var(--color-border-secondary);
      border-radius: 4px;

      &.moving {
        background-color: var(--color-bg-warning-secondary);
      }

      &.moved {
        animation: diagnoses-highlight-animation 0.9s ease-in-out;
      }

      .pill {
        font-size: 12px;
        font-weight: var(--weight-semi-bold);
        color: var(--color-bg-brand-solid);
        background-color: var(--color-bg-brand-secondary);
        border-radius: 999px;
        padding: 5px 12px;
      }

      .item-main {
        display: flex;
        min-width: fit-content;
        flex-direction: column;
        flex: 1;
        gap: 24px;

        &.compact {
          gap: 12px;
        }

        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: normal;

          .item-header-left {
            display: flex;
            gap: 12px;
          }

          .item-header-right {
            display: flex;
            gap: 16px;

            .item-status {
              flex: 0;
              display: flex;
              gap: 12px;
              align-items: center;
              font-size: 12px;
              font-weight: 700;
              white-space: nowrap;

              &.error {
                color: var(--color-text-error-primary);
              }

              &.in-progress, &.pending, &.processing {
                color: var(--color-text-progress-primary);
              }

              &.success, &.processed {
                color: var(--color-text-success-primary);
              }
            }

            a {
              width: 24px;
              height: 24px;
              display: flex;
              justify-content: center;

              i {
                font-size: 24px;
                color: var(--color-text-tertiary);

                &:hover {
                  color: var(--color-bg-brand-solid);
                }
              }
            }
          }
        }

        .title {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .name {
            font-weight: 700;
            font-size: 18px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;

            a:hover {
              color: var(--color-bg-brand-solid);
            }
          }

          .description {
            font-weight: 400;
            font-size: 14px;
          }
        }

        .categorization {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .category {
            display: flex;
            flex-direction: column;
            gap: 2px;

            .label {
              font-size: 12px;
              font-weight: 400;
              opacity: 0.7;

              i {
                font-size: 14px;

                &.warning {
                  color: var(--color-fg-error-secondary);
                }
              }
            }

            .value {
              font-size: 14px;
              font-weight: 500;
            }
          }

          .separator {
            display: none;
          }
        }

        .categorization-alt {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .category {
            display: flex;
            flex-direction: column;

            .label {
              font-size: 14px;
              font-weight: 400;
              opacity: 0.7;
            }

            .value {
              font-size: 14px;
              font-weight: 600;
            }
          }

          .separator {
            display: none;
          }
        }
      }

      .item-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 12px;
        align-self: stretch;
        align-items: flex-end;

        .item-actions {
          display: flex;
          flex-direction: row;
          gap: 12px;
          flex: 1;

          .flat-button {
            border: 0 none;
            background-color: transparent;
            color: var(--color-text-secondary);
            width: 20px;
            height: 20px;
            padding: 0;

            img {
              width: 20px;
              height: 20px;
            }
          }
        }

        .item-status {
          flex: 0;
          display: flex;
          gap: 12px;
          align-items: center;
          font-size: 12px;
          font-weight: 700;
          white-space: nowrap;

          &.error {
            color: var(--color-text-error-primary);
          }

          &.in-progress, &.pending, &.processing {
            color: var(--color-text-progress-primary);
          }

          &.success, &.processed {
            color: var(--color-text-success-primary);
          }
        }
      }
    }
  }

  .notification {
    padding: 24px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    background-color: white;

    &.error {
      background-color: var(--color-bg-error-primary);
      color: var(--color-text-error-primary);
    }

    &.warning {
      background-color: var(--color-bg-warning-primary);
      color: var(--color-text-warning-primary);
    }
  }

  button.new-ui-icon {
    background-color: transparent;
    border: 0 none;
    padding: 0;
  }

  .new-ui-icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;

    i {
      font-size: 24px;
      color: var(--color-text-tertiary);

      &:hover {
        color: var(--color-bg-brand-solid);
      }
    }
  }
}

@media(min-width: 800px) {
  .new-ui {
    padding: 40px 24px 24px 24px;

    .list {
      .item {
        padding: 24px;

        .item-main {
          .categorization {
            flex-direction: row;
            align-items: center;
            gap: 24px;

            .separator {
              border-left: 1px solid var(--color-border-secondary);
              height: 20px;

              &:last-child {
                display: none;
              }
            }
          }

          .categorization-alt {
            flex-direction: row;
            align-items: center;

            .category {
              flex-direction: row;
              gap: 4px;
            }

            .separator {
              display: block;
              border: 2px solid var(--color-text-secondary);
              border-radius: 50%;
              width: 4px;
              height: 4px;
              opacity: 0.7;

              &:last-child {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}