// Customisations for the new Bulk Edit Products page only
// Scoped to containing div, because Turbo messes with body classes
#products_v3_page {
  #content > .row:first-child > .container:first-child {
    // Allow table to extend to full width of available screen space
    // TODO: move this to a generic rule, eg body.full-width{}. Then it can be included on any page.
    //       or even better, create a switch that allows you to yield the page content without the surrounding content class. then you still have control to add the .content div where needed.
    max-width: none;
  }

  #products-content > .container:first-child {
    position: static;
  }

  #products-content .container {
    padding: 0;
  }

  .results {
    position: relative;
  }

  #products-form {
    .form-actions {
      .container {
        .status {
          flex-grow: 1; // Fill space
        }

        .form-buttons {
          flex-shrink: 0; // Don't shrink
        }
      }
    }
  }

  // Hopefully these rules will be moved to component(s).
  table.products {
    table-layout: fixed; // Column widths are based solely on col definitions (not content). This allows more efficient rendering.

    background-color: $color-tbl-bg;
    padding: 4px;
    padding-top: 0; // Hide border because .form-actions is there. It is added with th padding instead.
    border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows.

    // Additional horizontal padding to align with input contents
    thead {
      position: sticky;
      top: 0;
      z-index: 1; // TODO: Cover .popout and .vertical-ellipsis-menu, but only when sticky
      box-shadow: $box-shadow;

      // Form actions replaces other controls when active
      // It is part of the table header, to allow for sticky stacking when scrolling.
      .form-actions-wrapper {
        padding: 0;
        overflow: visible;
        background-color: white;
      }
      .form-actions-wrapper2 {
        position: relative;
        // Stretch to cover table side borders
        left: -4px;
        width: calc(100% + 8px);
        background-color: white;

        padding: 4px 0;
      }

      th.with-input {
        // Additional padding to line up with content of input
        padding-left: $padding-tbl-cell + $hpadding-txt;

        &.align-right {
          padding-right: $padding-tbl-cell + $hpadding-txt;
        }
      }
    }

    // Row hover
    tbody tr:hover {
      td {
        background-color: $light-grey;
        position: relative;

        // Left border
        &:first-child:before {
          content: "";
          position: absolute;
          top: 0;
          left: -4px;
          border-left: 4px solid $teal;
          height: 100%;
        }
      }

      // "Naked" inputs. Row hover helps reveal them.
      .naked_inputs {
        input:not([type="checkbox"]), .ts-control {
          background-color: $color-tbl-cell-bg;
        }
      }

      // Reveal naked button text when any part of row is hovered
      button.naked {
        color: $color-link;
      }
    }

    th,
    td {
      vertical-align: top;
      padding: $padding-tbl-cell;
      border: none;

      .content {
        // Plain content fields need help to align with text in inputs (due to vertical-align)
        margin: $vpadding-txt + 1px 0;

        @extend .line-clamp-1;
      }
    }

    th {
      padding-top: $padding-tbl-cell + 4px; // Increase padding to create a top border
      // Clip long content in headers, but allow wrapping
      overflow: hidden;
      text-overflow: clip; // If colums are so small that headers are clipping, ellipsis are more of a hindrance
    }

    td {
      position: relative; // Ensure that overflowing content is covered by the following cell. We don't use overflow: hidden because that messes with the popover.
      background-color: $color-tbl-cell-bg;
    }

    // "Relaxed" row groups, containing condensed rows.
    //
    // `display:table` enforces strict rules and won't allow border styles on tbody.
    // So we emulate group styles on the cells themselves.
    .relaxed {
      th,
      td {
        padding: $padding-tbl-cell-relaxed;
      }

      td {
        border-bottom: 2px solid $color-tbl-bg;

        &.with-image {
          padding: 8px;
        }
      }

      tr:first-child td {
        border-top: 4px solid $color-tbl-bg;
      }
      tr:last-child td {
        border-bottom: 1px solid $color-tbl-cell-shadow;
      }
    }

    // "Condensed" rows
    .condensed {
      td,
      th {
        padding: $padding-tbl-cell-condensed;
      }
    }

    .field {
      padding: 0;
    }
    .multi-field {
      // Allow wrap with small gap
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
    }

    .ts-control {
      z-index: 0; // Avoid hovering over thead
    }
  }

  #no-products {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: $h6-size;
    font-weight: 600;
    gap: 20px;
    margin-top: 116px;

    #no-products-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }
  }

  #sort {
    margin-top: 3px; // Helps even up with .form-actions when visible
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    line-height: $btn-relaxed-height;
    height: $btn-relaxed-height;

    &.disabled-section {
      display: none;
    }

    .with-dropdown {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .per-page {
      width: 10em;
    }
  }

  #filters {
    display: flex;
    column-gap: 20px;
    align-items: end;
    margin-bottom: 1rem;

    .query {
      flex-grow: 1;
      min-width: 15em;

      .search-input {
        width: 100%;
        position: relative;
        background-color: $lighter-grey;
        border: 1px solid $lighter-grey;
        border-radius: 4px;
        height: $btn-relaxed-height;
        line-height: $btn-relaxed-height;

        &:has(input:focus),
        &:has(input:active) {
          border: 1px solid $dark-blue;
        }

        > input {
          // Totally hide the input from its container
          background-color: transparent;
          border: none;
          width: calc(100% - 30px); // 30px is the width of the search icon + padding
        }

        &:before {
          font-family: FontAwesome;
          content: "\f002";
          color: $near-black;
          font-size: 16px;
          margin-left: 10px;
        }
      }
    }

    .producers,
    .categories {
      width: 15em;
    }

    .submit {
      text-align: right;

      .search-button {
        position: relative;
        > input {
          padding-left: 30px;
        }
      }
    }
  }

  // Blurred and non-clickable
  $disabled-blur: 1.5px;
  .disabled-section {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      backdrop-filter: blur($disabled-blur);
      // Stretch outside for a soft blur edge:
      left: -$disabled-blur;
      top: -$disabled-blur;
      bottom: -$disabled-blur;
      right: -$disabled-blur;
      z-index: 1; // Ensure tom-select is covered
    }
  }

  // Popout widget (todo: move to separate fiel)
  .popout {
    position: relative;

    &__button {
      // override button styles
      &.popout__button {
        background: $color-tbl-cell-bg;
        color: $color-txt-text;
        white-space: nowrap;
        border-color: transparent;
        font-weight: normal;
        padding-left: $border-radius; // Super compact
        padding-right: 1rem; // Retain space for arrow
        height: auto;
        min-width: 2em;
        min-height: 1lh; // Line height of parent

        &:hover,
        &:active,
        &:focus {
          background: $color-tbl-cell-bg;
          color: $color-txt-text;
          position: relative;
        }

        &.changed {
          border-color: $color-txt-changed-brd;
        }
      }

      &:hover:not(:active):not(:focus):not(.changed) {
        border-color: transparent;
      }

      &:hover,
      &:active,
      &:focus {
        // for some reason, sass ignores &:active, &:focus here. we could make this a mixin and include it in multiple rules instead
        &:before {
          // for some reason, sass seems to extends the selector to include every other :before selector in the app! probably causing the above, and potentially breaking other styles.
          // extending .icon-chevron-down causes infinite loop in compilation. does @include work for classes?
          font-family: FontAwesome;
          text-decoration: inherit;
          display: inline-block;
          speak: none;
          content: "\f078";

          position: absolute;
          top: 0; // Required for empty buttons
          right: $border-radius;
          font-size: 0.67em;
        }
      }
    }

    &__container {
      position: absolute;
      top: -0.6em;
      left: -0.2em;
      z-index: 1; // Cover below row when hover
      width: 9em;

      padding: $padding-tbl-cell;

      background: $color-tbl-cell-bg;
      border-radius: $border-radius;
      box-shadow: 0px 0px 8px 0px rgba($near-black, 0.25);

      .field{
        margin-bottom: 0.75em;

        &:last-child {
          margin-bottom: 0;
        }
      }

      input {
        height: auto;

        &[disabled] {
          color: transparent; // hide value completely
        }
      }
    }
  }

  a.image-field {
    position: relative;

    img {
      display: block;
      border-radius: $border-radius;
    }

    .button {
      display: none; // to be shown on hover
      position: absolute;
      bottom: 0;
      left: 0;
    }

    &:hover,
    &:focus {
      .button.secondary {
        display: block;
        background-color: $color-btn-secondary-hover-bg;
        color: $color-btn-hover-bg;
        border-color: $color-btn-hover-border;
      }
    }
  }
}
