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

[data-fs-product-comparison-toolbar] {
  // Design Tokens for Product Comparison Toolbar
  // --------------------------------------------------------

  // Default properties

  // Shadow
  --fs-product-comparison-box-shadow: var(--fs-shadow-darker);

  // Background
  --fs-product-comparison-bkg-color: var(--fs-color-body-bkg);
  --fs-product-comparison-bkg-color-neutral: var(--fs-color-neutral-1);

  // Text
  --fs-product-comparison-text-weight: var(--fs-text-weight-light);
  --fs-product-comparison-text-color: var(--fs-border-color-light);

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

  position: fixed;
  bottom: 0;
  z-index: var(--fs-z-index-highest);
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  padding: var(--fs-spacing-2);
  background-color: var(--fs-product-comparison-bkg-color);
  box-shadow: var(--fs-product-comparison-box-shadow);

  [data-fs-product-comparison-toolbar-image] {
    display: flex;
    gap: var(--fs-spacing-1);
    margin-bottom: var(--fs-spacing-1);

    img {
      width: var(--fs-spacing-8);
      height: var(--fs-spacing-8);
      resize: both;
      border-radius: var(--fs-border-radius);
    }

    [data-fs-product-comparison-toolbar-image-more] {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--fs-spacing-8);
      height: var(--fs-spacing-8);
      background-color: #f5f5f5;
    }
  }

  [data-fs-product-comparison-selection-warning-label] {
    display: flex;
    align-items: center;
    color: var(--fs-color-disabled-text);
  }

  @include utilities.media("<notebook") {
    [data-fs-button] {
      &[data-fs-button-variant="primary"],
      &[data-fs-button-variant="tertiary"] {
        font-size: var(--fs-text-size-1);
      }

      &[data-fs-button-variant="primary"] {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
      }
    }
  }

  @include utilities.media(">notebook") {
    display: flex;
    gap: var(--fs-spacing-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--fs-spacing-3) var(--fs-spacing-8);

    [data-fs-product-comparison-toolbar-image] {
      display: flex;
      gap: var(--fs-spacing-2);
      justify-self: left;
      margin-right: auto;
    }
  }
}

[data-fs-product-comparison-sidebar] {
  // --------------------------------------------------------
  // Design Tokens for Product Comparison Sidebar
  // --------------------------------------------------------

  // Default properties

  // Background
  --fs-product-comparison-bkg-color: var(--fs-color-body-bkg);

  // Title
  --fs-product-comparison-title-size: var(--fs-text-size-6);
  --fs-product-comparison-title-weight: var(--fs-text-weight-semibold);

  // Spacing
  --fs-product-comparison-padding: var(--fs-spacing-8);

  // Partial
  --fs-product-comparison-slide-over-partial-gap: calc(2 * var(--fs-grid-padding));
  --fs-product-comparison-slide-over-partial-width-mobile: calc(100vw - var(--fs-slide-over-partial-gap));
  --fs-product-comparison-slide-over-partial-width-notebook: calc(100% / 3);
  --fs-product-comparison-slide-over-partial-max-width-notebook: calc(var(--fs-grid-breakpoint-notebook) / 3);

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

  display: flex;
  flex-direction: column;

  &[data-fs-slide-over] {
    padding: var(--fs-spacing-1);

    [data-fs-slide-over-header] {
      [data-fs-product-comparison-sidebar-header-title] {
        padding: 0;
        font-size: var(--fs-text-size-3);
        font-weight: var(--fs-text-weight-semibold);
        text-align: left;
        letter-spacing: -0.04em;
      }

      div {
        display: flex;
        gap: var(--fs-spacing-2);
        align-items: center;
      }
    }

    &[data-fs-slide-over-size="partial"] {
      width: 100vw;
    }

    [data-fs-product-comparison-filters] {
      display: none;
    }

    [data-fs-table] {
      max-width: 100%;
      overflow: auto;

      [data-fs-table-content] {
        width: 100%;
      }

      [data-fs-table-head] {
        [data-fs-table-row] {
          display: flex;
          gap: var(--fs-spacing-3);

          [data-fs-table-cell] {
            display: flex;
            flex-direction: column;
            gap: var(--fs-spacing-1);
            justify-content: space-between;
            width: 12.5rem; // 200px -> 12.5rem
          }
        }
      }

      [data-fs-table-body] {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: var(--fs-spacing-3);
        border-top: var(--fs-border-width) solid var(--fs-border-color-light);

        @include utilities.media(">tablet") {
          width: 100%;
        }

        [data-fs-table-row] {
          display: flex;
          gap: var(--fs-spacing-2);
          border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);

          [data-fs-table-cell] {
            width: 12.5rem;
            padding: var(--fs-spacing-3) 0;
            color: var(--fs-color-text-light);

            [data-fs-product-comparison-row-header-button] {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              padding: 0;
              margin-bottom: var(--fs-spacing-0);

              [data-fs-button-wrapper] {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between;
                width: 100%;
                padding: 0;
                padding-right: var(--fs-spacing-1);
                text-align: start;
              }
            }

            [data-fs-product-comparison-row-header-button-title] {
              font-size: var(--fs-text-size-3);
              font-weight: var(--fs-text-weight-medium);
              line-height: 1.7;
              color: var(--fs-color-text);
            }

            [data-fs-product-comparison-row-header-button-description] {
              font-size: var(--fs-text-size-2);
              font-weight: var(--fs-text-weight-regular);
              line-height: 1.25;
              color: var(--fs-color-text-light);
            }

            [data-fs-product-comparison-row-label] {
              display: block;
              margin-bottom: var(--fs-spacing-1);
              font-size: var(--fs-text-size-1);
            }

            [data-fs-product-comparison-row-text] {
              font-size: var(--fs-text-size-2);
              font-weight: var(--fs-text-weight-medium);
              color: var(--fs-color-text);
            }
          }

          &[data-fs-product-comparison-row-header] {
            margin-top: var(--fs-spacing-4);
            margin-bottom: var(--fs-spacing-2);
            border-bottom: 0;

            [data-fs-table-cell] {
              width: 100%;
              padding: 0;
            }
          }
        }
      }
    }
  }

  @include utilities.media(">notebook") {
    display: flex;
    flex-direction: column;
    padding: var(--fs-spacing-6) var(--fs-spacing-8);

    &[data-fs-slide-over] {
      [data-fs-slide-over-header] {
        padding: var(--fs-spacing-1) 0;
        font-size: var(--fs-product-comparison-title-size);
        font-weight: var(--fs-product-comparison-title-weight);
      }

      &[data-fs-slide-over-size="partial"] {
        width: calc(100vw - 10vw);
        max-width: calc(100vw - 10vw);
        padding: var(--fs-spacing-5) var(--fs-spacing-8);
      }

      [data-fs-dropdown-button] {
        display: none;
      }

      [data-fs-product-comparison-filters] {
        display: flex;
        gap: var(--fs-spacing-4);
        padding-bottom: var(--fs-spacing-4);
        margin-bottom: var(--fs-spacing-3);

        [data-fs-toggle-field] {
          flex-direction: row-reverse;

          [data-fs-label] {
            margin-right: var(--fs-spacing-1);
            margin-left: 0;
          }
        }

        [data-fs-product-comparison-container] {
          display: flex;
          align-items: center;

          [data-fs-product-comparison-filters-sort-label] {
            margin-right: var(--fs-spacing-1);
            font-size: var(--fs-text-size-2);
            font-weight: var(--fs-product-comparison-text-weight);
          }
        }
      }

      [data-fs-table] {
        [data-fs-table-head] {
          [data-fs-table-row] {
            display: flex;
            gap: var(--fs-spacing-3);

            [data-fs-table-cell] {
              [data-fs-product-card-heading] {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
              }
            }
          }
        }

        [data-fs-table-body] {
          width: 100%;

          [data-fs-table-row] {
            display: flex;
            gap: var(--fs-spacing-3);
            min-width: 80vw;

            [data-fs-table-cell] {
              width: 12.5rem;

              [data-fs-product-comparison-row-header-button] {
                margin-bottom: var(--fs-spacing-1);
                font-size: var(--fs-text-size-3);
              }
            }
          }
        }
      }
    }
  }
}

[data-fs-product-comparison-dropdown-button] {
  @include utilities.media(">notebook") {
    display: none;
  }
}

[data-fs-product-comparison-dropdown-menu-content] {
  z-index: var(--fs-z-index-highest);
  margin: var(--fs-spacing-0) 0 var(--fs-spacing-2);
  background-color: var(--fs-color-tertiary-bkg-light);
  box-shadow: var(--fs-shadow-hover);

  [data-fs-dropdown-item] {
    position: relative;
    gap: var(--fs-spacing-2);
    width: 100%;
    padding: var(--fs-spacing-0) var(--fs-spacing-5);
    margin: 0;
    color: var(--fs-color-text);

    &[data-fs-dropdown-filter-selected] {
      padding: var(--fs-spacing-0) var(--fs-spacing-4) var(--fs-spacing-0) var(--fs-spacing-0);
    }

    p {
      font-size: var(--fs-text-size-2);
      font-weight: var(--fs-text-weight-regular);
      line-height: var(--fs-spacing-4);
      color: var(--fs-color-text);
    }

    [data-fs-toggle-field-label] {
      font-size: var(--fs-text-size-2);
      font-weight: var(--fs-text-weight-semibold);
      color: var(--fs-color-text);
    }
  }

  [data-fs-product-comparison-dropdown-item-filter-type] {
    padding: var(--fs-spacing-0) var(--fs-spacing-5);

    [data-fs-product-comparison-dropdown-item-filter-type-text] {
      font-size: var(--fs-text-size-1);
      font-weight: var(--fs-text-weight-regular);
      color: var(--fs-color-neutral-6);
    }
  }

  [data-fs-toggle-field] {
    flex-direction: row-reverse;
    padding: var(--fs-spacing-0) var(--fs-spacing-5) var(--fs-spacing-1);
    margin-bottom: var(--fs-spacing-1);
    border-bottom: 1px solid var(--fs-border-color-light);

    [data-fs-label] {
      margin-right: var(--fs-spacing-6);
      margin-left: 0;
    }
  }
}

[data-fs-product-grid-item] {
  [data-fs-product-comparison-trigger] {
    height: calc(var(--fs-spacing-5) + var(--fs-spacing-0));
  }

  [data-fs-checkbox-field] {
    padding: var(--fs-spacing-1);
  }
}