.rd-table-wrap {
  margin: 0 0 clamp(40px, 5.143vw, 72px) 0;
  padding-bottom: 40px;
  overflow-x: auto;

  figure {
    margin: 0 0 10px 0;
    overflow: visible;

    table,
    thead,
    tbody,
    th,
    td {
      border: none;
    }
  }

  table {
    margin-bottom: initial;
    font-size: 14px;
    position: relative;
    min-width: 600px;
    width: 100%;

    &.has-fixed-layout {
      table-layout: fixed;
    }

    @media (max-width: 1024px) {
      &.has-fixed-layout {
        table-layout: auto;
      }
    }
  }

  thead {
    color: #fff;
    line-height: 1.3;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, #db9d47, #6c4b8e);
      pointer-events: none;
    }

    th {
      position: relative;
      z-index: 1;
      text-align: left;
      font-weight: 400;
      padding: 20px;
      vertical-align: baseline;

      @media (max-width: 768px) {
        padding: 20px 15px;
        max-width: 200px;
      }
    }
  }

  tbody td:nth-of-type(1) {
    position: relative;
    color: var(--color-neutralis-dark, #2e2e3c);
    font-weight: 300;
  }

  tbody tr {
    position: relative;
  }

  :is(thead, tbody) tr th:nth-of-type(1) {
    width: 90px;
  }

  td,
  th {
    height: 57px;
    padding: 20px !important;
  }

  tbody tr:nth-child(n+6) {
    display: none;
  }

  .table-show-all {
    display: none;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
  }

  .table-show-all__btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s ease;

    &::after {
      content: '\2193';
      margin-left: 5px;
    }
  }

  &.show-all {
    .table-show-all__btn {
      &::after {
        content: '\2191';
      }
    }
  }
}


tbody tr {
  border-bottom: 1px solid rgba(0, 176, 172, 0.18);
}

tbody tr:last-child {
  border-bottom: none;
}

.rd-table-heading-gradient {
  border: 1px solid var(--color-border-light) !important;
}

.rd-table-wrap.rd-table-type-plain,
.rd-table-wrap table.rd-table-type-plain {
  tbody tr td {
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: calc(100% - 32px);
      transform: translateY(-50%);
      pointer-events: none;
    }
  }
}

.rd-table-wrap.rd-table-type-bars,
.rd-table-wrap table.rd-table-type-bars {
  position: relative;

  tbody tr {
    --bar-px-width: 0%;
    position: relative;
  }

  td {
    &::after {
      z-index: -1;
      pointer-events: none;
    }
  }

  td .table-bar {
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -15px;
      width: var(--bar-px-width, 0px);
      height: 10px;
      background: var(--color-light-gray);
      transition: width 1s ease-in;
      pointer-events: none;
    }
  }
}

.rd-table-wrap.rd-table-heading-level,
.rd-table-wrap table.rd-table-heading-level {
  thead {
    color: var(--color-main-text, #191d23);

    &::before {
      background: var(--level-color-light, #f8f3ff);
    }
  }
}

.rd-table-wrap.show-all {
  tbody tr {
    display: table-row;
    opacity: 1;
  }
}

.rd-table-wrap.rd-table-animation tbody tr:nth-child(-n+5) {
  opacity: 0;
  transform: translateY(20%);
  animation: rd-table-fade-in 0.5s ease-in forwards;
  animation-delay: calc(0.1s * (var(--n) - 1));
}

.rd-table-wrap.rd-table-animation tbody tr:nth-child(1) { --n: 1; }
.rd-table-wrap.rd-table-animation tbody tr:nth-child(2) { --n: 2; }
.rd-table-wrap.rd-table-animation tbody tr:nth-child(3) { --n: 3; }
.rd-table-wrap.rd-table-animation tbody tr:nth-child(4) { --n: 4; }
.rd-table-wrap.rd-table-animation tbody tr:nth-child(5) { --n: 5; }

@keyframes rd-table-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-table-wrap.rd-table-animation tbody tr:nth-child(-n+5) {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.block-editor-iframe__body .rd-table-wrap tbody tr,
.block-editor-block-preview__content-iframe .rd-table-wrap tbody tr {
  display: table-row;
  opacity: 1;
}

@media (max-width: 1024px) {
  .rd-table-wrap {
    padding: 5px 5px 24px 5px;

    .table-show-all {
      max-width: 276px;
    }
  }
}