@layer components {
  /* Source Table Container
  /* ------------------------------------------------------------------------ */

  .source-table {
    --table-gap: var(--inline-space);
    --table-row-padding: var(--block-space) var(--inline-space);

    display: flex;
    flex-direction: column;
    inline-size: 100%;
    text-align: start;
  }

  /* Table Header
  /* ------------------------------------------------------------------------ */

  .source-table__header {
    border-block-end: 1px solid var(--color-ink-lighter);
    color: var(--color-ink-dark);
    display: none;
    font-size: var(--text-small);
    font-weight: 600;
    padding: var(--block-space-half) var(--inline-space);
    text-transform: uppercase;

    @media (min-width: 640px) {
      display: grid;
      gap: var(--table-gap);
      grid-template-columns: 1fr 6rem 5rem 1fr 4rem;
    }
  }

  /* Table Row
  /* ------------------------------------------------------------------------ */

  .source-table__row {
    border-block-end: 1px solid var(--color-ink-lighter);
    display: grid;
    gap: var(--block-space-half) var(--table-gap);
    padding: var(--table-row-padding);
    transition: background-color 100ms ease-out;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-ink-lightest);
      }
    }

    /* Mobile: Stacked layout */
    @media (max-width: 639px) {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "name actions"
        "status status"
        "meta meta";
    }

    /* Desktop: Table layout */
    @media (min-width: 640px) {
      align-items: center;
      grid-template-columns: 1fr 6rem 5rem 1fr 4rem;
    }
  }

  /* Table Cells
  /* ------------------------------------------------------------------------ */

  .source-table__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    @media (max-width: 639px) {
      grid-area: name;
    }
  }

  .source-table__status {
    align-items: center;
    display: flex;
    gap: 0.5ch;

    @media (max-width: 639px) {
      grid-area: status;
    }
  }

  .source-table__status-dot {
    block-size: 0.5em;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    inline-size: 0.5em;
  }

  .source-table__status-dot--active {
    background-color: var(--color-positive);
  }

  .source-table__status-dot--inactive {
    background-color: var(--color-negative);
  }

  .source-table__status-dot--error {
    background-color: oklch(var(--lch-yellow-dark));
  }

  .source-table__status-dot--pending {
    background-color: oklch(var(--lch-blue-medium));
  }

  .source-table__status-text {
    font-size: var(--text-small);
  }

  .source-table__status-text--error {
    color: oklch(var(--lch-yellow-dark));
    font-weight: 600;
  }

  .source-table__articles {
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;

    @media (max-width: 639px) {
      grid-area: meta;

      &::before {
        content: "Articles: ";
        color: var(--color-ink-dark);
      }
    }
  }

  .source-table__website {
    align-items: center;
    color: var(--color-link);
    display: flex;
    font-size: var(--text-small);
    gap: 0.3ch;
    max-inline-size: 100%;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      text-decoration: underline;
    }

    @media (max-width: 639px) {
      display: none;
    }
  }

  .source-table__website-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .source-table__website .icon {
    --icon-size: 0.85em;
    flex-shrink: 0;
  }

  .source-table__actions {
    display: flex;
    gap: var(--inline-space-half);
    justify-content: flex-end;

    @media (max-width: 639px) {
      grid-area: actions;
    }
  }

  /* Error Detail Row
  /* ------------------------------------------------------------------------ */

  .source-table__error-detail {
    background-color: oklch(var(--lch-yellow-lightest));
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
    font-size: var(--text-small);
    color: var(--color-ink-dark);
  }

  .source-table__error-category {
    font-weight: 600;
    color: oklch(var(--lch-yellow-dark));
  }

  .source-table__error-message {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  .source-table__error-time {
    color: var(--color-ink-medium);
  }

  /* Edit Button
  /* ------------------------------------------------------------------------ */

  .source-table__edit {
    --btn-padding: 0.4em 0.8em;
    --btn-border-radius: 0.5em;

    font-size: var(--text-small);
  }
}