/* Stuff for horizontal scrolling via buttons */
.table-wrapper {
  position: relative;
  padding-top: 40px;

  --min-closed-height: 610;
  --max-closed-height: 735;
  --min-closed-height-rem: calc(var(--min-closed-height) * 1rem / 16);
  --max-closed-height-rem: calc(var(--max-closed-height) * 1rem / 16);

  &.closed {
    max-height: clamp(var(--min-closed-height-rem), calc(var(--min-closed-height-rem) + (var(--max-closed-height) - var(--min-closed-height)) * (100vw - var(--fluid-vw-min)) / var(--fluid-vw-range)), var(--max-closed-height-rem));
    overflow: hidden;

    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 200px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
      z-index: 1;
    }
  }
}

.table-scroll {
  position: absolute;
  top: 0;
  z-index: 10;

  background: none;
  border: none;
  padding: 0;
}

.table-scroll-left {
  right: 30px;
}

.table-scroll-right {
  right: 0;
}

/* scrollbar verbergen */
.table-responsive {
  scrollbar-width: none;
  /* Firefox */
}

.table-responsive::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.bike-details-table {
  --min-col1-width: 145;
  --max-col1-width: 183;
  --min-col1-width-rem: calc(var(--min-col1-width) * 1rem / 16);
  --max-col1-width-rem: calc(var(--max-col1-width) * 1rem / 16);

  --min-td-width: 183;
  --max-td-width: 328;
  --min-td-width-rem: calc(var(--min-td-width) * 1rem / 16);
  --max-td-width-rem: calc(var(--max-td-width) * 1rem / 16);

  /* Min gap: 22px, Max gap: 40px */
  /* TD padding = gap / 2 */
  --min-td-padding: 11;
  --max-td-padding: 20;
  --min-td-padding-rem: calc(var(--min-td-padding) * 1rem / 16);
  --max-td-padding-rem: calc(var(--max-td-padding) * 1rem / 16);

  /* Min teaser bottom padidng: 45px, Max teaser bottom padding: 100px */
  --min-teaser-bottom: 45;
  --max-teaser-bottom: 100;
  --min-teaser-bottom-rem: calc(var(--min-teaser-bottom) * 1rem / 16);
  --max-teaser-bottom-rem: calc(var(--max-teaser-bottom) * 1rem / 16);

  position: relative;
  z-index: 0;

  th {
    min-width: clamp(var(--min-col1-width-rem), calc(var(--min-col1-width-rem) + (var(--max-col1-width) - var(--min-col1-width)) * (100vw - var(--fluid-vw-min)) / var(--fluid-vw-range)), var(--max-col1-width-rem));
    position: sticky;
    left: 0;
  }

  td {
    min-width: clamp(var(--min-td-width-rem), calc(var(--min-td-width-rem) + (var(--max-td-width) - var(--min-td-width)) * (100vw - var(--fluid-vw-min)) / var(--fluid-vw-range)), var(--max-td-width-rem));
    padding-left: clamp(var(--min-td-padding-rem), calc(var(--min-td-padding-rem) + (var(--max-td-padding) - var(--min-td-padding)) * (100vw - var(--fluid-vw-min)) / var(--fluid-vw-range)), var(--max-td-padding-rem)) !important;
    padding-right: clamp(var(--min-td-padding-rem), calc(var(--min-td-padding-rem) + (var(--max-td-padding) - var(--min-td-padding)) * (100vw - var(--fluid-vw-min)) / var(--fluid-vw-range)), var(--max-td-padding-rem)) !important;
  }

  .views-field-rendered-entity {
    padding-bottom: clamp(var(--min-teaser-bottom-rem), calc(var(--min-teaser-bottom-rem) + (var(--max-teaser-bottom) - var(--min-teaser-bottom)) * (100vw - var(--fluid-vw-min)) / var(--fluid-vw-range)), var(--max-teaser-bottom-rem)) !important;
  }

  &.table> :not(caption)>*>* {
    padding: 1em 0 1em 0;
  }
}

.specifactions-table-headings {
  margin-top: 75px;

  .table-cell {
    padding: 1em 0 1em 0;
  }

  tr:first-child {
    border: none;

    .table-cell {
      border: none;
    }
  }
}

.bike-details-content {
  >.views-field {
    border-bottom: 1px solid rgba(194, 194, 194, .5);
    padding: 1em 1em 1em 0;

    &.prop1 {
      border-bottom: none;
      font-weight: bold;
    }
  }


}

/* .specifications-component {
  position: relative;
  z-index: 0;

  &.closed {
    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 200px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
      z-index: 1;
    }
  }
}

.specifications-component.closed {

  .specifications-column-1,
  .specifications-column-2 {
    max-height: 400px;
    overflow: hidden;
    position: relative;


  }
} */

.btn-compare {
  &:after {
    content: '';
    display: inline-block;
    height: 1em;
    width: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" transform="matrix(1,0,0,-1,0,0)"><path d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg>');
  }

  &.closed {
    &:after {
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"/></svg>');
    }
  }
}

.views-field-view-commerce-product {
  a {
    color: var(--bs-black);
    text-decoration: underline;
  }
}