@use "../../../styles/base/utilities";

[data-fs-product-title] {
  // --------------------------------------------------------
  // Design Tokens for Product Title
  // --------------------------------------------------------

  // Default properties
  --fs-product-title-text-size            : var(--fs-text-size-title-product);
  --fs-product-title-text-weight          : var(--fs-text-weight-regular);
  --fs-product-title-line-height          : 1.12;
  --fs-product-title-column-gap           : var(--fs-spacing-2);
  --fs-product-title-row-gap              : var(--fs-spacing-3);

  --fs-product-title-addendum-color       : var(--fs-color-text-light);
  --fs-product-title-addendum-size        : var(--fs-text-size-1);
  --fs-product-title-addendum-line-height : 1.7;

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  [data-fs-product-title-header] {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--fs-product-title-row-gap);
    column-gap: var(--fs-product-title-column-gap);
    justify-content: space-between;
    max-width: 42ch;

    // Title prop
    > *:first-child {
      font-size: var(--fs-product-title-text-size);
      font-weight: var(--fs-product-title-text-weight);
      line-height: var(--fs-product-title-line-height);
    }

    [data-fs-badge] { white-space: nowrap; }

    @include utilities.media(">=tablet", "<notebook") {
      flex-direction: column;
      row-gap: var(--fs-product-title-row-gap);
    }
  }

  [data-fs-product-title-addendum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--fs-product-title-row-gap);
    font-size: var(--fs-product-title-addendum-size);
    line-height: var(--fs-product-title-addendum-line-height);
    color: var(--fs-product-title-addendum-color);
  }
}