@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-table';

#{$Component} {
  position: relative;
  width: 100%;
  display: table;
  text-align: center;

  .text-align-left {
    text-align: left;
  }

  .text-align-right {
    text-align: right;
  }

  &_header {
    display: table-header-group;
    color: $at-table-header-text-color;
    font-size: $at-table-header-font-size;

    &.bordered {
      #{$Component}-td {
        border-bottom: 1px solid $color-grey-4;
      }
    }
  }

  &_body {
    display: table-row-group;
    font-size: $at-table-body-font-size;
  }

  &-tr {
    display: table-row;
  }

  &-td {
    display: table-cell;
    padding: 24px;
    vertical-align: middle;
  }
}