:host {
  display: block;
  width: 100%;
}

  :host * {
    box-sizing: border-box;
  }

.data-cell {
  display: flex;
  align-items: center;
  gap: var(--s-space-8);
  width: 100%;
  padding: var(--s-space-12) var(--s-space-16);
  background-color: var(--s-surface-raised-50-default);
  border-radius: var(--swirl-data-cell-border-radius, var(--s-border-radius-l));
}

.data-cell--interactive {
  cursor: pointer;
}

/* Intent backgrounds */
.data-cell--intent-default {
  background-color: var(--swirl-tag-background-default);
}

.data-cell--intent-info {
  background-color: var(--s-surface-info-subdued);
}

.data-cell--intent-critical {
  background-color: var(--s-surface-critical-subdued);
}

.data-cell--intent-warning {
  background-color: var(--s-surface-warning-subdued);
}

.data-cell--intent-success {
  background-color: var(--s-surface-success-subdued);
}

.data-cell--intent-special {
  background-color: var(--s-decorative-grape-surface-subdued);
}

.data-cell--intent-translucent {
  background-color: var(--s-surface-on-image-default);
}

.data-cell--vertical {
  align-items: center;
}

.data-cell__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.data-cell__media ::slotted(swirl-avatar) {
    --swirl-avatar-background-color: var(--s-surface-default);
  }

.data-cell__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-24);
}

.data-cell--no-label .data-cell__content,
.data-cell--no-label .data-cell__value-wrapper,
.data-cell--no-label .data-cell__input {
  width: 100%;
}

.data-cell--vertical .data-cell__content {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-space-4);
}

.data-cell__label-wrapper {
  flex-shrink: 0;
  min-width: 0;
}

.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper {
  width: calc(160px + var(--s-space-4) + 16px);
}

.data-cell__label {
  display: block;
  font-size: var(--s-font-size-sm);
  line-height: var(--s-line-height-sm);
  color: var(--s-text-subdued);
  font-weight: var(--s-font-weight-normal);
}

.data-cell:not(.data-cell--vertical) .data-cell__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.data-cell__tooltip swirl-icon-info {
    flex-shrink: 0;
    color: var(--s-text-subdued);
  }

.data-cell__value-wrapper {
  display: flex;
  align-items: center;
  gap: var(--s-space-4);
  flex-shrink: 1;
  min-width: 0;
}

.data-cell--vertical .data-cell__value-wrapper {
  flex-direction: column;
  align-items: flex-start;
}

.data-cell__value {
  flex: 1;
  min-width: 0;
  font-size: var(--s-font-size-sm);
  line-height: var(--s-line-height-sm);
  color: var(--s-text-default);
  font-weight: var(--s-font-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-cell--vertical .data-cell__value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.data-cell__suffix {
  flex-shrink: 0;
}

.data-cell__input {
  width: 100%;
}

/* apply white background color to form control inputs */

.data-cell__input ::slotted(swirl-form-control) {
    --swirl-form-control-label-background-color: var(
      --swirl-data-cell-input-background,
      var(--s-surface-default)
    );
  }

/* ensure checkbox and radio elements take full width */

.data-cell__input ::slotted(swirl-checkbox),
  .data-cell__input ::slotted(swirl-radio) {
    width: 100%;
  }

/* Responsive: Switch to vertical layout on mobile */
@media (max-width: 767px) {
  .data-cell:not(.data-cell--vertical) .data-cell__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-space-4);
  }

  .data-cell:not(.data-cell--vertical) .data-cell__value-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}