@use '../styles/variables' as *;

$root: FlatTable;
$borderColor: var(--FlatTable-borderColor, #454858);
$bgColor: var(--FlatTable-bgColor, #141721);

:global {
  .#{$root} {
    color: white;

    .cb-TableCell {
      &:nth-child(n + 2) {
        border-left: 1px solid $borderColor;
      }

      &_sticky {
        background-color: $bgColor;
      }
    }
  }
}

.bordered {
  :global {
    .cb-Table {
      border-spacing: 0 0.2rem;
      border-bottom: none;
    }
    .cb-TableRow:nth-child(n + 2) {
      .cb-TableCell {
        border-top: 1px solid $borderColor;
      }
    }
    .cb-TableCell {
      border-top: 0.1rem solid $borderColor;
      border-bottom: 0.1rem solid $borderColor;

      &:first-child {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        border-left: 0.1rem solid $borderColor;
      }
      &:last-child {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        border-right: 0.1rem solid $borderColor;
      }
    }
  }
}

:export {
  root: $root;
}