@import "../../../../assets/scss/variables";
@import "../../../../assets/scss/mixins";

@mixin set-column-align($num-columns) {
    @for $i from 1 through $num-columns {
      td:nth-child(#{$i}) {
        text-align: column-align($i);
      }
    }
  }

  @function column-align($index) {
    @return unquote("var(--column_align-#{$index})");
  }

.ftm-table {
  table {
    th {
      background-color: var(--ftm-table-2-h-bg-color);
      color: var(--ftm-table-2-h-text-color);
      border-style: none;
      padding: 1em 2em 1em 1em;
      @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
          width: calc(var(--header_width-#{$i}) * 1%);
        }
      }
    }

    @include set-column-align(100);
    td {
      //text-align: var(--txt-align);
      p {
        margin: unset;
        width: 100%;
        box-sizing: border-box;
      }
    }

    tr:not(:first-child) td:nth-child(2) ul {
      @media (max-width: $breakpoint-sm) {
        padding-left: 0%;
      }
    }
  }

  &.scroll {
    @media (max-width: $breakpoint-sm) {
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      overflow-x: scroll;
      display: block;
    }

    > table {
      min-width: 50%;

      @media (max-width: $breakpoint-sm) {
        td {
          font-size: 16px;
        }
      }
    }
  }

  &.vertical {
    > table {
      @media (max-width: $breakpoint-sm) {
        thead {
          display: none;

          th {
            text-align: center !important;
          }
        }
        tr {
          display: grid;
          border-bottom: 1px solid #000000;
        }

        td {
          /*text-align: center !important;*/
          display: flex;
          width: 100%;
          min-width: 200px;
          padding: 0px;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          align-items: center;

          &:before {
            content: attr(data-header);
            width: 100px;
            min-width: 100px;
            float: left;
            background-color: var(--data-bg, #388acc);
            color: var(--data-txt-color, #ffffff);
            padding: 10px 5px;
            height: 100%;
            text-align: center;
          }

          ul {
            margin-left: 20px;
            margin-bottom: 10px;
            margin-top: 5px;
            text-align: inherit;

            li {
              text-align: inherit;
            }
          }
        }
      }
    }
  }
}
