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

[data-fs-sku-matrix-sidebar] {
  // --------------------------------------------------------
  // Design Tokens for SKU Matrix Sidebar
  // --------------------------------------------------------

  // Default properties
  --fs-sku-matrix-sidebar-bkg-color                       : var(--fs-color-body-bkg);

  // Title
  --fs-sku-matrix-sidebar-title-size                      : var(--fs-text-size-6);
  --fs-sku-matrix-sidebar-title-text-weight               : var(--fs-text-weight-semibold);

  // Cell
  --fs-sku-matrix-sidebar-table-cell-font-size            : var(--fs-text-size-tiny);
  --fs-sku-matrix-sidebar-table-cell-text-weight          : var(--fs-text-weight-medium);

  // Image
  --fs-sku-matrix-sidebar-table-cell-image-width          : var(--fs-spacing-7); // 48px
  --fs-sku-matrix-sidebar-table-cell-image-border-radius  : var(--fs-border-radius);

  // Partial
  --fs-sku-matrix-slide-over-partial-gap                  : calc(2 * var(--fs-grid-padding));
  --fs-sku-matrix-slide-over-partial-width-mobile         : calc(100vw - var(--fs-sku-matrix-slide-over-partial-gap));

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

  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;

  &[data-fs-slide-over] {
    background-color: var(--fs-sku-matrix-sidebar-bkg-color);

    [data-fs-slide-over-header] {
      padding: var(--fs-spacing-8);
      padding-bottom: 0;

      @include utilities.media("<tablet") {
        padding: var(--fs-spacing-3);
        padding-bottom: 0;
      }
    }

    &[data-fs-slide-over-size="partial"] {
      width: var(--fs-sku-matrix-slide-over-partial-width-mobile);

      @include utilities.media(">=notebook") {
        max-width: var(--fs-sku-matrix-slide-over-partial-width-mobile);
      }
    }
  }

  [data-fs-sku-matrix-sidebar-title] {
    font-size: var(--fs-sku-matrix-sidebar-title-size);
    font-weight: var(--fs-sku-matrix-sidebar-title-text-weight);
    line-height: 1.12;
  }

  [data-fs-table] {
    flex-shrink: 0;
    padding: var(--fs-spacing-3) var(--fs-spacing-8);
    padding-bottom: 0;
    color: var(--fs-color-neutral-6);

    @include utilities.media("<tablet") {
      padding: var(--fs-spacing-3);
      padding-bottom: 0;
    }

    [data-fs-table-cell] {
      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }
  }

  [data-fs-table-head] {
    [data-fs-table-cell] {
      font-size: var(--fs-sku-matrix-sidebar-table-cell-font-size);
      font-weight: var(--fs-sku-matrix-sidebar-table-cell-text-weight);
    }
  }

  [data-fs-table-cell],
  [data-fs-price-variant="spot"] {
    font-weight: var(--fs-text-weight-medium);
  }

  [data-fs-table-cell]:first-child,
  [data-fs-sku-matrix-sidebar-table-price] {
    color: var(--fs-color-text);
  }

  [data-fs-sku-matrix-sidebar-table-price] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  [data-fs-sku-matrix-sidebar-table-cell-quantity-selector] {
    width: 1%;
  }

  [data-fs-sku-matrix-sidebar-cell-image] {
    display: flex;
    gap: var(--fs-spacing-2);
    align-items: center;

    img {
      object-fit: cover;
      object-position: center;
      width: var(--fs-sku-matrix-sidebar-table-cell-image-width);
      height: var(--fs-sku-matrix-sidebar-table-cell-image-width);
      border-radius: var(--fs-sku-matrix-sidebar-table-cell-image-border-radius);
    }
  }

  [data-fs-quantity-selector] {
    [data-fs-icon] {
      margin: 0;
    }
  }

  [data-fs-sku-matrix-sidebar-footer] {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--fs-spacing-4) var(--fs-spacing-8);
    margin-top: auto;
    background-color: var(--fs-sku-matrix-sidebar-bkg-color);
    border-top: var(--fs-border-width) solid var(--fs-border-color-light);

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

      > p {
        font-weight: var(--fs-text-weight-semibold);
        color: var(--fs-color-neutral-5);
      }
    }

    @include utilities.media("<tablet") {
      padding: var(--fs-spacing-3);
    }
  }
}