@import "./vars.pcss";

.blockTable {
  table-layout: var(--blockTableLayout);
  width: var(--blockTableWidth);
  border-collapse: var(--blockTableBorderCollapse);
  display: var(--blockTableDisplay);
  @mixin mb var(--blockTableMb);

  @media(--tabletAbove) {
    caption {
      display: table-caption;
    }

    td,
    th {
      @mixin fc {
        border-top-left-radius: var(--blockTableTdEdgeBorderRadius);
        border-bottom-left-radius: var(--blockTableTdEdgeBorderRadius);
      }
      @mixin lc {
        border-top-right-radius: var(--blockTableTdEdgeBorderRadius);
        border-bottom-right-radius: var(--blockTableTdEdgeBorderRadius);
      }
    }
  }

  @media(--tablet) {
    --blockTableDisplay: block;

    thead,
    th {
      display: none;
    }

    tr {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      position: relative;
    }

    caption,
    tfoot,
    tbody,
    td {
      display: block;
    }

    td {
      &::before {
        content: attr(data-css-cell-label);
        display: block;
        font-size: var(--blockTableTdLabelFontSize);
        line-height: var(--blockTableTdLabelLineHeight);
        font-weight: var(--blockTableTdLabelFontWeight);
        color: var(--blockTableTdLabelColor);
        text-transform: var(--blockTableTdLabelTextTransform);
      }

      &:empty {
        display: none;
      }
    }
  }

  caption,
  thead,
  tbody,
  tfoot {
    position: relative;
  }

  /* stylelint-disable */
  thead,
  tbody,
  tfoot {
    @mixin lc {
      tr {
        @mixin lc {
          td {
            border-bottom-width: var(--blockTableTdLastBorderBottomWidth);
          }
        }
      }
    }
  }
  /* stylelint-enable */

  &__caption {
    text-align: var(--blockTableCaptionTextAlign);
    font-size: var(--blockTableCaptionFontSize);
    font-weight: var(--blockTableCaptionFontWeight);
  }

  &__sort {
    display: var(--blockTableSortDisplay);
    align-items: var(--blockTableSortAlignItems);
    justify-content: var(--blockTableSortJustifyContent);
    width: var(--blockTableSortWidth);
    cursor: var(--blockTableSortCursor);

    &Label {
      margin-right: var(--blockTableSortLabelMr);
    }

    &Icon {
      flex-shrink: 0;
    }

    &Inputs {
      @mixin visuallyHidden;
    }
  }

  &__row {
    &--isClickable {
      cursor: pointer;
    }
  }

  &__cell {

    @media(--tabletAbove) {
      &--isRight {
        --blockTableThTextAlign: right;
        --blockTableTdTextAlign: right;
      }

      &--isCenter {
        --blockTableThTextAlign: center;
        --blockTableTdTextAlign: center;
      }
    }

    @media(--mobileAbove) {
      &--isWidth-33 {
        --blockTableTdWidth: 33.333%;
        --blockTableThWidth: 33.333%;
      }

      &--isWidth-66 {
        --blockTableTdWidth: 66.666%;
        --blockTableThWidth: 66.666%;
      }
    }

    @media(--tablet) {
      &--isTabletWidth-33 {
        --blockTableTdWidth: 33.333%;
        --blockTableThWidth: 33.333%;
      }

      &--isTabletWidth-66 {
        --blockTableTdWidth: 66.666%;
        --blockTableThWidth: 66.666%;
      }
    }

    @media(--mobile) {
      &--isMobileWidth-33 {
        --blockTableTdWidth: 33.333%;
        --blockTableThWidth: 33.333%;
      }

      &--isMobileWidth-66 {
        --blockTableTdWidth: 66.666%;
        --blockTableThWidth: 66.666%;
      }
    }
    @for $i from 0 to 100 by 5 {
      @media(--mobileAbove) {
        &--isWidth-$(i) {
          --blockTableTdWidth: $(i)%;
          --blockTableThWidth: $(i)%;
        }
      }

      @media(--tablet) {
        &--isTabletWidth-$(i) {
          --blockTableTdWidth: $(i)%;
          --blockTableThWidth: $(i)%;
        }
      }

      /* stylelint-disable declaration-no-important */
      @media(--mobile) {
        &--isMobileWidth-$(i) {
          --blockTableTdWidth: $(i)% !important;
          --blockTableThWidth: $(i)% !important;
        }
      }
      /* stylelint-enable declaration-no-important */
    }

    &--isClickable {
      cursor: pointer;
    }
  }

  tbody {
    @mixin nlc {
      margin-bottom: var(--blockTableTrMb);
    }
  }

  tr {
    border-radius: var(--blockTableTdEdgeBorderRadius);

    @mixin transition var(--blockTableTrTransition);
    @mixin nlc {
      margin-bottom: var(--blockTableTrMb);
    }
  }

  th {
    text-transform: var(--blockTableThTextTransform);
    font-size: var(--blockTableThFontSize);
    line-height: var(--blockTableThLineHeight);
    user-select: var(--blockTableThUserSelect);
    color: var(--blockTableThColor);
    font-weight: var(--blockTableThFontWeight);
    border: var(--blockTableThBorder);
    border-width: var(--blockTableThBorderWidth);
    vertical-align: var(--blockTableThVerticalAlign);
    width: var(--blockTableThWidth);
    padding: var(--blockTableThPadding);
    text-align: var(--blockTableThTextAlign);
    background-clip: var(--blockTableThBackgroundClip);
    background-color: var(--blockTableThBgColor);
    position: var(--blockTableThPosition);
    word-break: var(--blockTableThBreakWord);
    hyphens: var(--blockTableThHyphens);
    @mixin transition var(--blockTableThTransition);
  }

  td {
    text-transform: var(--blockTableTdTextTransform);
    font-size: var(--blockTableTdFontSize);
    line-height: var(--blockTableTdLineHeight);
    user-select: var(--blockTableTdUserSelect);
    color: var(--blockTableTdColor);
    font-weight: var(--blockTableTdFontWeight);
    border: var(--blockTableTdBorder);
    border-width: var(--blockTableTdBorderWidth);
    vertical-align: var(--blockTableTdVerticalAlign);
    width: var(--blockTableTdWidth);
    padding: var(--blockTableTdPadding);
    text-align: var(--blockTableTdTextAlign);
    background-clip: var(--blockTableTdBackgroundClip);
    background-color: var(--blockTableTdBgColor);
    position: var(--blockTableTdPosition);
    @mixin transition var(--blockTableTdTransition);
  }
}

.adaptiveTable {
  --adaptiveTableShadowStart: transparent;
  --adaptiveTableShadowEnd: transparent;
  --adaptiveTableShadowZIndex: 2;
  --adaptiveTableShadowWidth: 25%;
  --adaptiveTableWidth: 100%;
  --adaptiveTablePosition: relative;
  --adaptiveTableWrapperPadding: 0 1px;
  width: var(--adaptiveTableWidth);
  position: var(--adaptiveTablePosition);

  @mixin hideScrollbar;

  &__wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--adaptiveTableWrapperPadding);
    @mixin customScrollbar;

    @media (--tablet) {
      table {
        min-width: 150%;
      }
    }

    @media (--mobile) {
      table {
        min-width: 200%;
      }
    }
  }

  &.isEdgeLeft {
    &::before {
      @mixin hide;
    }
  }

  &.isEdgeRight {
    &::after {
      @mixin hide;
    }
  }

  &::before,
  &::after {
    position: absolute;
    height: 100%;
    width: var(--adaptiveTableShadowWidth);
    pointer-events: none;
    z-index: var(--adaptiveTableShadowZIndex);
    top: 0;
    @mixin transition;

    @media (--tablet) {
      content: "";
    }

    @media (--mobile) {
      width: 15%;
    }
  }

  &::before {
    background: linear-gradient(to right, var(--adaptiveTableShadowStart), transparent);
    left: -1px;
  }

  &::after {
    background: linear-gradient(to left, var(--adaptiveTableShadowEnd), transparent);
    right: -1px;
  }

  &--isFormatted {
    --typoTableLayout: auto;

    &::after,
    &::before {
      content: "";
    }
  }
}