@layer components {
  .uptime-bars__header,
  .uptime-bars__row {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: minmax(200px, 1fr) 1fr auto;
    padding: calc(var(--block-space) * 0.75) var(--block-space);
  }

  .uptime-bars__days {
    align-items: center;
    display: flex;
    gap: 2px;
  }

  .uptime-bars__uptime {
    font-size: var(--text-small);
    font-weight: 500;
    text-align: right;
    width: 7ch;
  }

  .uptime-bars__uptime--excellent {
    color: var(--color-positive);
  }

  .uptime-bars__uptime--good {
    color: oklch(70% 0.12 145);
  }

  .uptime-bars__uptime--warning {
    color: oklch(75% 0.15 85);
  }

  .uptime-bars__uptime--critical,
  .uptime-bars__uptime--down {
    color: var(--color-negative);
  }

  /* Individual uptime bar */
  .uptime-bar {
    border-radius: 2px;
    cursor: default;
    flex: 1;
    height: 24px;
    max-width: 12px;
    min-width: 4px;
    transition: transform 100ms, filter 100ms;
  }

  .uptime-bar:hover {
    filter: brightness(1.1);
    transform: scaleY(1.15);
  }

  .uptime-bar--excellent {
    background: var(--color-positive);
  }

  .uptime-bar--good {
    background: oklch(70% 0.14 145);
  }

  .uptime-bar--warning {
    background: oklch(75% 0.15 85);
  }

  .uptime-bar--critical {
    background: oklch(65% 0.16 42);
  }

  .uptime-bar--down {
    background: var(--color-negative);
  }

  .uptime-bar--no-data {
    background: var(--color-ink-light);
    opacity: 0.4;
  }

  @media (max-width: 85ch) {
    .uptime-bars__header,
    .uptime-bars__row {
      grid-template-columns: minmax(120px, 150px) 1fr auto;
      gap: calc(var(--block-space) * 0.5);
    }

    .data-table__probe .probe__badge {
      display: none;
    }
  }

  @media (max-width: 55ch) {
    .uptime-bars__header,
    .uptime-bars__row {
      grid-template-columns: minmax(80px, 120px) 1fr auto;
      padding: calc(var(--block-space) * 0.5);
    }

    .uptime-bar {
      height: 18px;
    }

    .uptime-bars__days .uptime-bar:not(:nth-last-child(-n+7)) {
      display: none;
    }
  }
}