/* Reset der HTML Base Elements */
.flex-table {
  span {
    all: unset;

    margin: 0;
    padding: 0;
  }
}
.flex-table, .flex-table > * {
  box-sizing: border-box;
}


/* Wrapper für eine seitliche Scrollleiste */
.flex-table-wrapper {
  /* Variables */
  --color-secondary: #ffa300;
  --line-color: var(--color-secondary);
  --line-height: 4px; /* Must be higher than spacer-y */
  --space-x: 2px;
  --space-y: 2px;
  --space-color: #eae9e9;
  --ff-headline: AccordAlt_Bold, sans-serif;
  --ff-body: HelveticaNeueLTStd-Roman, sans-serif;
  --bg-color-odd: #d1d0cf;
  --bg-color-hover: #acacac;


  overflow-x: hidden;
  overflow-y: hidden;
  margin-bottom: 20px;
  width: 100%;

}

/* Container um Tabellen Rand Links und Rechts abzuschneiden bei der "border-collapse: collapse" methode */
.flex-table-container {
  overflow-x: auto;
  margin-inline: calc(-1 * (var(--space-x) * 2));
  margin-block: calc(-1 * (var(--space-y) * 2));
}


/* Table */
.flex-table {

  /* Layout */
  border-collapse: collapse;
  text-align: center;
  line-height: 1.4;
  width: 100%;
  border: none;


  /* Table Elements */
  td,
  th {
    padding: 5px 10px;
    border-block: var(--space-y) solid var(--space-color);
    border-inline: var(--space-x) solid var(--space-color);
  }

  tr {
    background-color: white;

  }

  thead th:has(.product) {
    padding: 1rem;
  }

  /* tbody tr:hover {
    background-color: var(--bg-color-hover);
  } */

  /* Even/Odd effect */
  &.striped {
    tbody {
      tr:nth-child(odd) {
        background-color: var(--bg-color-odd);
        /* &:hover {
          background-color: var(--bg-color-hover);
        } */
      }
    }
  }

  /* FONT FAMILY */
  .ff-headline {
    font-family: var(--ff-headline);
    font-weight: 700;
  }

  .ff-body {
    font-family: var(--ff-body);
    font-weight: 400;
  }

  /* TYPOGRAPHY */
  .title {
    font-weight: 700;
    font-family: var(--ff-headline);
    font-size: 1rem;
  }

  .description {
    font-size: 0.875rem;
    font-weight: 400;
    font-family: var(--ff-body);
  }

  .product {
    font-size: 1rem;
    /* font-weight: 400; */
    font-family: var(--ff-body);
  }

  tbody {
    font-family: var(--ff-body);
    font-size: 0.875rem;

    .title {
      font-size: 0.9rem;
      line-height: 1.5;
      font-family: var(--ff-body);
    }

    .description {
      font-size: 0.75rem;
      text-wrap: nowrap;
      line-height: 1.5;
    }
  }

  .brutto {
    font-weight: 700;
  }

  .netto {
    font-weight: 400;
  }

  .netto:before {
    content: "(";
  }

  .netto:after {
    content: ")";
  }


  /* Helper */
  .row-line-top {
    border-top: var(--line-height) solid var(--line-color);
  }
  .row-line-bottom {
    border-bottom: 4px solid var(--line-color);
  }

  .text-bold {
    font-weight: 700;
  }

  .text-underline {
    text-decoration: underline;
  }

  .bg-white {
    background-color: white;
  }

  .bg-offwhite {
    background-color: #e6e6e6;
  }

  .flex-table-list {
    list-style: none;
    margin: 0;
    padding: 0;

    font-size: 0.75rem;
    font-family: var(--ff-body);

    li {
      line-height: 1.4;
    }
  }


  /*  POSITION  */
  .p-left {
    text-align: left;
  }

  .p-right {
    text-align: right;
  }

  .p-center {
    text-align: center;
  }

  .align-top {
    vertical-align: top;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-bottom {
    vertical-align: bottom;
  }

  /* SPACING */
  .row-extended {
    th {
      padding-block: 8px;
    }
  }

  /* MARGIN */
  .mt-1 { margin-top: 0.5rem;}
  .mt-2 { margin-top: 1rem;}

  .mb-1 { margin-bottom: 0.5rem;}
  .mb-2 { margin-bottom: 1rem;}
}


/* Fußzeile */
.flex-table-wrapper .footnote {
  margin: 0;
  margin-inline: calc(var(--space-x) * 2);
  margin-block: calc(var(--space-y) * 2);
  padding: 0;
  padding-top: 0.25rem;
  font-family: var(--ff-body);
  font-size: 0.875rem;
}