@layer components {
  .issues__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .issue-card {
    position: relative;
    list-style-type: none;
    background: var(--color-white);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);

    .issue-card__header {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-3);
    }

    .issue-card__title {
      margin-bottom: var(--space-2);
    }

    .issue-card__description {
      color: var(--color-gray-700);
    }

    .issue-card__footer {
      margin-top: var(--space-3);

      .issue-card__assignee {
        color: var(--color-gray-900);
      }
    }

    .issue-card__expanded {
      margin-top: var(--space-4);
      padding-top: var(--space-4);
      border-top: 1px solid var(--color-border);
    }

    .issue-card__bulk-assign {
      display: flex;
      justify-content: flex-start;
      margin-bottom: var(--space-3);
    }

    .issue-sublist {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .issue-sublist__item {
      list-style: none;
      padding: var(--space-2);
      background: var(--color-gray-50);
      border-radius: var(--radius-md);

      code {
        font-size: var(--text-sm);
        color: var(--color-gray-700);
      }
    }

    .issue-sublist__item--selectable {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
    }

    .issue-sublist__checkbox {
      flex-shrink: 0;
      padding-top: var(--space-1);
    }

    .issue-sublist__content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2) var(--space-4);
      flex: 1;
    }

    .issue-sublist__page {
      font-size: var(--text-sm);
      color: var(--color-gray-600);
    }

    .issue-sublist__assignee {
      font-size: var(--text-sm);
      color: var(--color-gray-600);
    }

    .issue-card__single-details {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2) var(--space-4);
      margin-top: var(--space-3);
    }

    .issue-card__category {
      font-size: var(--text-sm);
      color: var(--color-gray-600);
    }

    &::before {
      content: "";
      width: 4px;
      height: calc(100% + 2px);
      position: absolute;
      top: -1px;
      left: -1px;
    }

    &.issue-card--notice {
      &::before {
        background: var(--color-primary-600);
      }
    }
    &.issue-card--warning {
      &::before {
        background: var(--color-warning);
      }
    }
    &.issue-card--error {
      &::before {
        background: var(--color-error);
      }
    }
  }

  [data-theme="dark"] {
    .issue-card {
      background: var(--color-hover);

      .issue-sublist__item {
        background: var(--color-gray-800);
      }

      .issue-sublist__page,
      .issue-sublist__assignee,
      .issue-card__category {
        color: var(--color-gray-400);
      }
    }
  }
}