table.css

@import "fyndiq-styles-colors/colors.css";

.table {
  border-collapse: collapse;
  width: 100%;
}

.cell {
  vertical-align: top;
  padding: 0 8px;
}

.row {
  box-shadow: 0 0 5px 0 color(var(--color-black) a(10%));

  & > .cell {
    background: var(--color-white);
  }

  & > :first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  & > :last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }
}

.rowStart {
  & > :first-child {
    border-bottom-left-radius: 0;
  }

  & > :last-child {
    border-bottom-right-radius: 0;
  }
}

.rowEnd {
  box-shadow: 5px 5px 5px -5px color(var(--color-black) a(10%)), -5px 5px 5px -5px color(var(--color-black) a(10%));

  & > :first-child {
    border-top-left-radius: 0;
  }

  & > :last-child {
    border-top-right-radius: 0;
  }
}

.rowStart.rowEnd {
  box-shadow: 5px 0 5px -5px color(var(--color-black) a(10%)), -5px 0 5px -5px color(var(--color-black) a(10%));
}

.rowSize-l .cell {
  padding-top: 32px;
  padding-bottom: 32px;
}

.rowSize-m .cell {
  padding-top: 24px;
  padding-bottom: 24px;
}

.rowSize-s .cell {
  padding-top: 16px;
  padding-bottom: 16px;
}

.rowHead {
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-lightgrey);
  font-weight: 300;
  box-shadow: none;

  & .cell {
    padding-top: 18px;
    padding-bottom: 18px;
    background-color: transparent;
  }
}

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

.rowInteractive {
  cursor: pointer;

  &:hover .cell {
    background: var(--color-palegrey);
  }
}

.rowSpacer {
  height: 2px;
}

.cellSpacer {
  width: 20px;
}

.cellCenter {
  text-align: center;
}