@use "sass:color";


/*================================
=            Tabellen            =
================================*/

.frame-type-table {
  @include media-breakpoint-down(sm) {
    width: 100%;
    margin-bottom: ($line-height-base * 0.75);
    overflow-y: hidden;

    // Tighten up spacing
    > table {
      margin-bottom: 0;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .contenttable-3 {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }

          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      }

      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
      // chances are there will be only one `tr` in a `thead` and that would
      // remove the border altogether.
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}


/*==========  Standard Layout  ==========*/

.ce-table {
  @extend .table;
  @extend .table-hover;

  thead > tr > th {
    text-align: left;
    border-bottom-width: 1px;
    color: $gray-800;
  }

  td {
    padding-right: 1em !important;
  }

  td:last-child {
    padding-right: 0 !important;
  }
}


/* Todo: .contentable classes are obsolte */

/*==========  Layout 1  ==========*/
.contenttable-0 {
  //.table-condensed();
  @extend .table-sm;
}


/*==========  Layout 2  ==========*/
.contenttable-1 {
  //.table-condensed();
  @extend .table-sm;

  caption {
    //padding: $table-condensed-cell-padding;
  }
}


/*==========  Layout 3  ==========*/
.contenttable-2 {
  @extend .table-striped;
}


/*==========  Layout 4  ==========*/
.contenttable-3 {
  @extend .table-bordered;
}


/*===========================================
=            Common Table Styles            =
===========================================*/

.table-responsive {
  scroll-snap-type: both proximity;
  position: relative;
}


.table {
  caption-side: top;

  caption {
    background-color: $primary;
    color: #fff;
    font-weight: $font-weight-bold;
    padding: $table-cell-padding-y $table-cell-padding-x;
    text-align: left;

    span {
      position: sticky;
      left: $table-cell-padding-x;
    }
  }

  thead th {
    background-color: $gray-200;
    border-bottom-width: 0;
    font-weight: $font-weight-bold;
  }

  thead th:first-child,
  tbody th {
    position: sticky;
    left: 0;

    &:after {
      opacity: 0;
      background: linear-gradient(
                      90deg,
                      rgba(0, 0, 0, 0.1) 0%,
                      rgba(0, 0, 0, 0) 100%
      );
      content: "";
      display: block;
      width: 6px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 100%;
      transition: opacity 0.5s ease;
    }

    .is-pinned & {
      &:after {
        opacity: 1;
      }
    }
  }

  th {
    white-space: nowrap;
  }

  td {
    scroll-snap-align: end;
  }
}


table.disabled {
  color: $gray-200;
  border-color: $gray-200;
  height: 0;

  caption {
    background-color: $gray-200;
    color: $gray-800;
  }

  back {
    color: $gray-800;
    background-color: $gray-200;
    display: none;
  }

  tbody {
    display: none;
  }
}


.table-downloads {
  /* download tables on the same page must have equal column count to align properly! */
  min-width: 100%;
  width: max-content;
  @include media-breakpoint-up(sm) {
    max-width: 100%;
  }

  td {
    scroll-snap-align: none;
  }

  tbody th {
    font-weight: inherit;
  }

  thead th:first-child,
  tbody th {
    white-space: normal;
    hyphens: auto;
    width: 40vw;
    @include media-breakpoint-up(sm) {
      min-width: 30%;
      width: inherit;
    }
  }

  thead th:not(:first-child),
  tbody td {
    @include media-breakpoint-up(sm) {
      width: 20%;
      max-width: 16%;
    }
  }

  .download-link, .internal-link, .ifu-link {
    font-size: small;
    color: $gray-600;
  }

  .internal-link {
    &:before {
      color: $primary;
    }

    @include icon-inline('icon', $icons, 'link-ext');
  }

  .ifu-link {
    &:before {
      color: $primary;
    }

    @include icon-inline('icon', $icons, 'ifu');
  }
}


/* Styling für die einzelnen Spalten und Zellen */

.table-products,
.table-implantate,
.table-nadeln {
  .colImg {
    text-align: center;
    position: relative;
  }

  tr:hover {
    td[rowspan] {
      background: #fff;
    }
  }
}


/*==========  Tabelle für Nahtmaterial  ==========*/

.table-faden {
  .colImg {
    width: 21%;

    .amnty1 {
      display: block;
      font-size: 14px;
      line-height: $line-height-base;
      font-weight: $font-weight-bold;
      margin: 0;
    }
  }

  .colNr {
    width: 10%;
  }

  .colName {
    width: 25%;
    white-space: nowrap;
  }

  .colFaden {
    width: 10%;
  }

  .colEP {
    width: 6%;
    text-align: center;
  }

  .colUSP {
    width: 6%;
    text-align: center;
  }

  .colVPE {
    width: 6%;
  }

  .colBrutto {
    width: 9%;
    text-align: right;
  }

  .colBestellen {
    width: 7%;
    text-align: right;
  }

  .nadelbeschreibung {
    margin-left: 30px;
  }

  .nadeltyp {
    margin: 0;
    left: -26px;
    top: -6px;
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;

    color: $primary;
    background: #fff;
    text-align: center;
    font-size: 15px;
    font-family: Arial, sans-serif;
    border: 1px solid $primary;

    .disabled & {
      color: $gray-800;
      border-color: $gray-800;
    }
  }
}


/*==========  Tabellen im Bereich Lösungen  ==========*/

.table-loesungen {
  // Art.Nr.
  .colNr {
    min-width: 70px;
    width: 10%;
  }

  //PZN
  .colPZN {
    min-width: 70px;
    width: 10%;
  }

  // Behältnis
  .colInhalt {
    min-width: 120px;
    width: auto;
  }

  // Inhalt
  .colVPE {
    min-width: 30px;
    width: 10%;
    max-width: 50px;
  }

  // VPE
  .colBrutto,
  .colBestellen {
    min-width: 133px;
    width: 15%;
    text-align: right;
  }

  .gebrauchsinformationen {
    float: right;

    a {
      color: rgba(255, 255, 255, 0.8);

      &:hover,
      &:focus {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}


/*==========  Tabellen Öhrnadeln kaufen  ==========*/

.table-nadeln {
  .colImg {
    width: 30%;

    .amnty1 {
      font-size: 14px;
      line-height: $line-height-base;
      font-weight: $font-weight-bold;
      margin: 0;
    }
  }

  .colEP {
    width: 15%;
    // text-align: center;
  }

  .colUSP {
    width: 15%;
    // text-align: center;
  }

  .colSteril {
    width: 10%;
  }

  .colVPE {
    width: 5%;
  }

  .colNr {
    width: 7.5%;
  }

  .colBrutto {
    width: 7.5%;
    text-align: right;
  }

  .colBestellen {
    width: 10%;
    text-align: right;
    min-width: 100px;
  }
}


/*==========  Tabellen für textile Implantate  ==========*/

.table-implantate {
  tbody > tr > td {
    line-height: 1.4;
  }

  // Symbol
  td > [class^="implantat"] {
    font-size: 140px;
  }

  .colImg {
    min-width: 80px;
    width: 25%;
  }

  // Bezeichnung
  .colName {
    width: 40%;
    min-width: 200px;
  }

  // Eigenschaften
  .colFaden {
    //    min-width: 120px;
    //    width: 10%;
    //    display: none;
  }

  //Art.Nr.
  .colNr {
    min-width: 70px;
    width: 10%;
  }

  //VPE
  .colVPE {
    min-width: 30px;
    width: 5%;
  }

  // Brutto
  .colBrutto {
    min-width: 100px;
    text-align: right;
    width: 10%;
  }

  // Bestellen-Button
  .colBestellen {
    min-width: 135px;
    text-align: right;
    width: 15%;
  }
}


.table-hospitation {
  .colDate {
    min-width: 100px;
    width: 20%;
  }

  .colOrt {
    min-width: 100px;
    width: 10%;
  }

  .colTitle {
    min-width: 200px;
    width: 60%;
  }

  .colLink {
    min-width: 100px;
    width: 10%;
  }
}


//
// Produktlistenfilter
// --------------------------------------------------
#filternav {
  transition: all 0.5s ease 0.2s;

  //@include make-container();

  .filternav-trigger {
    opacity: 0;
  }

  position: relative;
  height: 100%;
  margin-bottom: $line-height-base;
  @include media-breakpoint-down(up) {
    .filter-type {
      @include make-col(4);
    }
    .filter-length {
      @include make-col(4);
    }
    .filter-diameter {
      @include make-col(4);
    }
  }

  .filter-reset {
    font-size: $font-size-sm;
    position: absolute;
    top: 8px;
    right: 8px;
    color: $gray-800;
    cursor: pointer;

    &:hover {
      .icon-cancel {
        color: red;
      }
    }
  }

  &.affix {
    z-index: 1;
    top: 0;
    right: -346px;
    position: fixed;
    @include media-breakpoint-down(xs) {
      .filter-type {
        @include make-col(12);
      }

      .filter-length {
        @include make-col(12);
      }

      .filter-diameter {
        @include make-col(12);
      }
    }

    .filternav-trigger {
      opacity: 1;
    }

    .filternav-wrapper {
      width: 346px;
      padding-top: 50px;
    }
  }

  &.in {
    right: 0px;
    @include media-breakpoint-down(sm) {
      width: 100%;
    }
  }
}


.filternav-trigger {
  position: absolute;
  top: 50px;
  transform: rotate(90deg);
  transform-origin: 0 0;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;

  .trigger-icon {
    background-color: $primary;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    float: left;

    .icon-collapse-left:before {
      content: "\e830";
      color: #fff;
      transform: rotate(-90deg);
      transition: all 0.2s ease;
    }
  }

  .trigger-label {
    text-transform: uppercase;
    //font-size: $h4-font-size;
    line-height: 46px;
    color: #fff;
    padding-left: 1em;
    padding-right: 1em;
    background: $gray-800;
    opacity: 1;
    float: right;
    transition: all 0.5s ease 0.7s;
  }

  #filternav.in & {
    @include media-breakpoint-down(sm) {
      right: 0;
      opacity: 1;
    }

    .icon {
      transform: rotate(90deg);

      &:before {
        content: "\e805";
        // margin-right: 0;
        // display: block;
      }
    }

    .trigger-label {
      transition-delay: 0s;
      opacity: 0;
    }
  }
}


.filternav-wrapper {
  background-color: darken($gray-200, 5%);
  display: flex;
  flex-direction: column;
  @include media-breakpoint-up(sm) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


.filter-head {
  background-color: $gray-800;
  width: 100%;
}


.filter-headline {
  font-size: $h4-font-size;
  text-transform: uppercase;
  line-height: 46px;
  padding-left: 1.6rem;
  margin: 0;
  color: #fff;
  @include icon("icon", $icons, "filter");
}


.filter-img img {
  //.img-responsive();
}


.filter-section {
  @include make-col-ready();
  @include make-col();
  //border-top: 1px solid $gray-200;

  position: relative;

  &:first-child {
    border-top: 0;
  }
}


.filter-title {
  font-size: $h4-font-size;
  margin-top: 0;
}


.filter-switch,
.filter-selector {
  margin-bottom: ($line-height-base * 0.5);
}


.nav-needles {
  padding: 0;
  margin-bottom: ($line-height-base * 0.5);
  list-style: none;

  .nadelsymbol {
    display: block;
    float: left;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
    margin-right: 5px;
    border: 1px solid $primary;
    color: $primary;
    transition: all 0.2s ease 0.2s;
    background: #fff;
    font: bold 11px/33px Arial, sans-serif;
    width: 33px;
    height: 33px;
    border-radius: 50%;

    text-align: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.1s ease;

    &:hover,
    &:focus {
      color: darken($primary, 20%);
      border-color: darken($primary, 20%);
    }

    &.disabled {
      color: $gray-800;
      border-color: $gray-800;

      &:hover,
      &:focus {
        color: $gray-800;
        border-color: $gray-800;
      }
    }
  }
}


.diameters {
  padding: 0;
  margin-bottom: 0;
  list-style: none;

  .diameter {
    display: block;
    float: left;
    background-color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 0 3px 3px 0;
    color: $gray-800;
    cursor: pointer;

    &:hover,
    &:focus {
      color: darken($primary, 20%);
    }

    &.on {
      color: $primary;
    }
  }
}


/* Functional styling;
/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.noUi-target {
  position: relative;
  direction: ltr;
}


.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}


/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}


.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}


/* Offset direction
 */
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
}


/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0;
}


.noUi-horizontal .noUi-origin {
  height: 0;
}


.noUi-handle {
  position: absolute;
}


.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}


.noUi-state-drag * {
  cursor: inherit !important;
}


/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}


.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px;
}


.noUi-vertical {
  width: 18px;
}


.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}


html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto;
}


/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb;
}


.noUi-connects {
  border-radius: 3px;
}


.noUi-connect {
  background: #3fb8af;
}


/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}


.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}


.noUi-handle {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  cursor: default;
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
}


.noUi-active {
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
}


/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #e8e7e6;
  left: 14px;
  top: 6px;
}


.noUi-handle:after {
  left: 17px;
}


.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}


.noUi-vertical .noUi-handle:after {
  top: 17px;
}


/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #b8b8b8;
}


[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}


/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.noUi-pips {
  position: absolute;
  color: #999;
}


/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}


.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}


/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #ccc;
}


.noUi-marker-sub {
  background: #aaa;
}


.noUi-marker-large {
  background: #aaa;
}


/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}


.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}


.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}


.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}


.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}


.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}


/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}


.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}


.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}


.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}


.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}


.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}


.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}


.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}


.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
