@use '../mixins';

// used by message and the popup message on map
.metadata {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 3px;
  margin-bottom: -3px;
  $font-size: 11.5px;
  $line-height: 16px;

  &.with-image-no-caption {
    padding: 4px 10px 1px 10px;
    margin: 0;
    background-color: #0000008f;
    border-radius: 4px;
    font-weight: bold;

    .date,
    .edited,
    .viewCount {
      color: white;
    }

    .email-icon {
      @include mixins.color-svg('./images/icons/email.svg', white, 125%);
    }

    .saved-message-icon {
      @include mixins.color-svg(
        './images/icons/bookmark-filled.svg',
        white,
        100%
      );
    }

    .status-icon.sending {
      background-color: white;
    }
  }

  .aria-live-wrapper,
  .delivery-status-wrapper {
    // Basically try to behave the same as if the wrapper just wasn't there.
    display: inline-block;
    line-height: 0;
  }

  .delivery-status-wrapper {
    position: relative;
    button.error-button {
      // Fill the parent.
      position: absolute;
      inset: 0;
      border: none;
      background: transparent;
    }
  }
  .status-icon {
    margin-bottom: 2px;
  }

  .date,
  .edited,
  .viewCount {
    font-size: $font-size;
    line-height: $line-height;
    letter-spacing: 0.3px;
    color: var(--messageMetadataDate);
  }
  .edited {
    // Assumes that there is always a date after it.
    margin-inline-end: 0.5ch;
  }
  .viewCount {
    margin-inline-start: 1ch;

    // Reduce content shifting during loading.
    // Works for two-digit view counts.
    min-width: 4.5ch;
    text-align: end;
    .viewCountValue {
      min-width: 1.5ch;
      display: inline-block;
    }
  }

  .spacer {
    flex-grow: 1;
  }

  .location-icon,
  .email-icon,
  .saved-message-icon,
  .viewCountIcon {
    display: inline-block;
  }
  .location-icon,
  .email-icon,
  .saved-message-icon {
    width: 12px;
    height: 12px;
    margin-inline-end: 4px;
    margin-bottom: 0px;
  }
  .viewCountIcon {
    @include mixins.color-svg(
      './images/icons/visibility.svg',
      currentColor,
      $line-height
    );
    width: $line-height;
    height: $line-height;
    // This value doesn't change the height of the wrapper.
    vertical-align: bottom;
  }
}
