.table {
  width: 100%;
  border: 1px solid var(--medium-gray-color);
  border-radius: 20px;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.table::-webkit-scrollbar {
  display: none;
}
.table__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.table__cell {
  position: relative;
  padding: calc(var(--spacing-base) * 5);
  min-width: 260px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 12px;
}
.table__item {
  display: flex;
  gap: 12px;
}
.table__body .table__row:not(:last-child) .table__cell {
  border-bottom: 1px solid var(--medium-gray-color);
}
.table__row-divider .table__cell:first-child {
  padding-right: calc(var(--spacing-base) * 10);
}
.table__row-divider .table__cell:last-child {
  padding-left: calc(var(--spacing-base) * 10);
}
.table__cell svg {
  flex: none;
  width: 12px;
  height: var(--small-line-height);
}
.table__cell pre {
  font-style: italic;
}
.table__icon-divider {
  position: absolute;
  top: 50%;
  left: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--second-color);
  border-radius: 32px;
  transform: translate(-50%, -50%);
}
.table__icon-divider svg {
  width: 12px;
  height: 12px;
  fill: var(--white-color);
}

@media screen and (max-width: 800px) {
  .table {
    border-radius: 12px;
  }
  .table__cell {
    padding: calc(var(--spacing-base) * 4);
  }
  .table__row-divider .table__cell:first-child {
    padding-right: calc(var(--spacing-base) * 8);
  }
  .table__row-divider .table__cell:last-child {
    padding-left: calc(var(--spacing-base) * 8);
  }
  .table__icon-divider {
    width: 28px;
    height: 28px;
  }
  .table__icon-divider svg {
    width: 10px;
    height: 10px;
  }
}

{# COLORS #}
.table *[color="first"] { color: var(--first-color); }
.table *[color="second"] { color: var(--second-color); }
.table *[color="third"] { color: var(--third-color); }
.table *[color="fourth"] { color: var(--fourth-color); }
.table *[color="fifth"] { color: var(--fifth-color); }
.table *[color="first-accent"], .table__head[color="first-accent"] h3 { color: var(--first-accent-color); }
.table *[color="second-accent"] { color: var(--second-accent-color); }
.table *[color="third-accent"] { color: var(--third-accent-color); }
.table *[color="fourth-accent"] { color: var(--fourth-accent-color); }
.table *[color="fifth-accent"] { color: var(--fifth-accent-color); }
.table *[color="default"] { color: var(--default-color); }
.table *[color="dark-gray"] { color: var(--dark-gray-color); }
.table *[color="medium-gray"] { color: var(--medium-gray-color); }
.table *[color="light-gray"] { color: var(--light-gray-color); }
.table *[color="white"] { color: var(--white-color); }

.table[background="first"], .table *[background="first"] { background: var(--first-color); }
.table[background="second"], .table *[background="second"] { background: var(--second-color); }
.table[background="third"], .table *[background="third"] { background: var(--third-color); }
.table[background="fourth"], .table *[background="fourth"] { background: var(--fourth-color); }
.table[background="fifth"], .table *[background="fifth"] { background: var(--fifth-color); }
.table[background="first-accent"], .table *[background="first-accent"] { background: var(--first-accent-color); }
.table[background="second-accent"], .table *[background="second-accent"] { background: var(--second-accent-color); }
.table[background="third-accent"], .table *[background="third-accent"] { background: var(--third-accent-color); }
.table[background="fourth-accent"], .table *[background="fourth-accent"] { background: var(--fourth-accent-color); }
.table[background="fifth-accent"], .table *[background="fifth-accent"] { background: var(--fifth-accent-color); }
.table[background="default"], .table *[background="default"] { background: var(--default-color); }
.table[background="dark-gray"], .table *[background="dark-gray"] { background: var(--dark-gray-color); }
.table[background="medium-gray"], .table *[background="medium-gray"] { background: var(--medium-gray-color); }
.table[background="light-gray"], .table *[background="light-gray"] { background: var(--light-gray-color); }
.table[background="white"], .table *[background="white"] { background: var(--white-color); }