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

[data-fs-product-details] {
  // --------------------------------------------------------
  // Design Tokens for Product Details
  // --------------------------------------------------------

  // Default properties
  --fs-product-details-vertical-spacing      : var(--fs-spacing-4);
  --fs-product-details-horizontal-spacing    : var(--fs-product-details-vertical-spacing);

  --fs-product-details-section-bkg-color     : transparent;
  --fs-product-details-section-border-radius : var(--fs-border-radius);
  --fs-product-details-section-border-color  : var(--fs-border-color-light);
  --fs-product-details-section-border-width  : var(--fs-border-width);

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

  margin-top: 0;

  [data-fs-product-details-body] {
    display: flex;
    flex-direction: column;
    row-gap: var(--fs-product-details-vertical-spacing);

    @include utilities.media(">=tablet") {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      row-gap: 0;
      column-gap: var(--fs-product-details-horizontal-spacing);
    }
  }

  [data-fs-product-details-section] {
    height: fit-content;

    [data-fs-buy-button] {
      width: 100%;
      margin-top: var(--fs-spacing-3);
    }

    [data-fs-product-price] {
      [data-fs-price-variant="spot"] {
        margin: 0;
        font-size: var(--fs-text-size-4);
        font-weight: var(--fs-text-weight-black);
        line-height: 1.12;
      }
    }

    @include utilities.media(">=tablet") {
      padding: var(--fs-spacing-3);
      border: var(--fs-product-details-section-border-width) solid var(--fs-product-details-section-border-color);

      &:not(:first-child) {
        border-top: 0;
      }
    }

    @include utilities.media(">=notebook") {
      padding: var(--fs-product-details-vertical-spacing) var(--fs-spacing-5);
    }
  }

  [data-fs-product-details-title],
  [data-fs-product-details-info] {
    background-color: var(--fs-product-details-section-bkg-color);

    @include utilities.media(">=tablet") {
      grid-column: 8 / span 5;
      height: 100%;
    }

    @include utilities.media(">=notebook") {
      grid-column: 9 / span 4;
    }
  }

  // -----------------------------
  // Title Section
  // -----------------------------

  [data-fs-product-details-title] {
    @include utilities.media(">=tablet") {
      border-bottom: 0;
      border-radius: var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius) 0 0;
    }
  }

  // -----------------------------
  // Info Section
  // -----------------------------

  [data-fs-product-details-info] {
    display: flex;
    flex-direction: column;
    row-gap: var(--fs-product-details-vertical-spacing);

    @include utilities.media(">=tablet") {
      grid-row: span 5;
      row-gap: 0;
      border-radius: 0 0 var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius);
    }
  }

  // Settings

  [data-fs-product-details-settings] {
    display: flex;
    flex-direction: column;
    row-gap: var(--fs-product-details-vertical-spacing);
  }

  [data-fs-product-details-selectors] {
    display: flex;
    flex-direction: column;
    row-gap: var(--fs-product-details-vertical-spacing);
  }

  [data-fs-product-details-prices] {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  [data-fs-product-details-values] {
    display: flex;
    justify-content: space-between;
  }

  // -----------------------------
  // Gallery Section
  // -----------------------------

  [data-fs-product-details-gallery] {
    @include utilities.media(">=tablet") {
      grid-row: 1 / span 3;
      grid-column: span 7;
      max-height: 23.75rem;
    }

    @include utilities.media(">tablet", "<notebook") {
      max-height: 35rem;
    }

    @include utilities.media(">=notebook") {
      max-height: 33.125rem;
    }

    &[data-fs-image-gallery="without-selector"] {
      @include utilities.media(">=notebook") {
        grid-row-end: span 4;
        grid-column: span 8;
      }
    }

    &[data-fs-image-gallery="with-selector"] {
      @include utilities.media(">=notebook") {
        grid-row: 1 / span 4;
        grid-column: span 8;
      }
    }
  }

  // -----------------------------
  // Content Section
  // -----------------------------

  [data-fs-product-description] {
    @include utilities.media(">=tablet") {
      grid-row: span 10;
      grid-column: span 7;
      margin-top: var(--fs-spacing-7);
    }

    @include utilities.media(">=notebook") {
      grid-column: span 8;
    }
  }

  [data-fs-product-details-description-content] {
    /**
    * display: contents allows you to remove an element from the box tree but still keep its contents
    * It doesn't have padding or margin, for example.
    *
    * https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/
    */
    display: contents;
    font-size: var(--fs-text-size-body);
    line-height: 1.5;
  }

  [data-fs-image-gallery="with-selector"] ~ [data-fs-product-description] {
    @include utilities.media(">=notebook") {
      grid-column: 2 / 9;
    }
  }
}