@use '../../styles/typography';

// CSS custom properties — override at :root or component level to theme the card
// --detail-card-bg:           card background color
// --detail-card-border-color: border and divider color
// --detail-card-border-radius: corner radius
// --detail-card-shadow:       box shadow
// --detail-card-padding:      internal padding
// --detail-card-label-color:  label text color

.detail-card {
  background: var(--detail-card-bg, #fff);
  border-radius: var(--detail-card-border-radius, 10px);
  border: 1px solid var(--detail-card-border-color, #e7e7e7);
  box-shadow: var(--detail-card-shadow, 10px 20px 40px 0 rgba(0, 0, 0, 0.05));
  padding: var(--detail-card-padding, 22px 32px);

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__title {
    @include typography.text-lg;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
  }

  &__title-icon {
    opacity: 0.6;
  }

  &__divider {
    margin: 12px 0;
    border: none;
    border-top: 1px solid var(--detail-card-border-color, #e7e7e7);
  }

  &__body {
    min-height: 24px;
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: 16px 24px;
    margin: 0;
    padding: 0;
  }

  &__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__label {
    @include typography.text-sm;
    font-weight: 500;
    color: var(--detail-card-label-color, #888);
    margin: 0;
  }

  &__value {
    @include typography.text-base;
    font-weight: 600;
    margin: 0;
    word-break: break-word;
  }

  &__empty {
    opacity: 0.5;
    font-weight: 400;
  }
}