:host {
  display: block;
  font-family: var(--ls-font-family);
  color: var(--ls-font-primary-color);
}

.ls-status-messages {
  padding-bottom: 1rem;
}

.ls-status-messages .title {
  font-size: var(--ls-text-2xl);
  line-height: var(--ls-line-2xl);
  font-weight: 600;
}

.ls-status-messages .subtitle {
  font-size: var(--ls-text-base);
  line-height: var(--ls-line-base);
  color: var(--ls-warning-text, #92400e);
  background-color: var(--ls-warning-background, #fef3c7);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  border-left: 4px solid var(--ls-warning-text, #f59e0b);
  border-radius: 0.25rem;
  font-weight: 500;
}

.ls-status-messages .label {
  font-size: var(--ls-text-lg);
  line-height: var(--ls-line-lg);
  align-self: start;
  grid-column: 1;
  grid-row: 1;
}

.ls-status-messages .message {
  max-width: 800px;
  min-width: 550px;
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ls-gray-100);
}

.ls-status-messages .message:last-child {
  border-bottom: none;
}

.ls-status-messages .timestamp,
.ls-status-messages .identification {
  font-size: var(--ls-text-sm);
  line-height: var(--ls-line-sm);
  color: var(--ls-gray-600);
}

.ls-status-messages .status-code {
  font-size: var(--ls-text-sm);
  line-height: var(--ls-line-sm);
  color: var(--ls-gray-600);
  grid-column: 1;
  grid-row: 2;
}

.ls-status-messages .human-readable-timestamp {
  font-size: var(--ls-text-base);
  line-height: var(--ls-line-base);
  align-self: end;
}

.ls-status-messages .relative-timestamp {
  grid-column: 3;
}

.ls-status-messages .severity {
  color: var(--ls-default-text);
  background-color: var(--ls-default-background);
  font-size: var(--ls-text-sm);
  line-height: var(--ls-line-sm);
  height: var(--ls-line-sm);
  border-radius: 3px;
  width: fit-content;
  padding: 0.375rem 0.5rem;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.ls-status-messages .impact {
  color: var(--ls-danger-text);
  background-color: var(--ls-danger-background);
}

.ls-status-messages .non-impact {
  color: var(--ls-warning-text);
  background-color: var(--ls-warning-background);
}

.ls-status-messages .informational {
  color: var(--ls-info-text);
  background-color: var(--ls-info-background);
}

/* Two-column layout for smaller screens */
@media (max-width: 630px) {
  .ls-status-messages .message {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .ls-status-messages .message > .label {
    grid-column: 1;
    grid-row: 1;
  }

  .ls-status-messages .message > .status-code {
    grid-column: 1;
    grid-row: 2;
  }

  .ls-status-messages .message > .severity {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.25rem;
  }

  .ls-status-messages .message.has-status-code > .severity {
    grid-row: 3;
  }

  .ls-status-messages .message > .human-readable-timestamp {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .ls-status-messages .message > .relative-timestamp {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: start;
  }
}