@import 'src/styles/theme';

.ele-table {
  @extend %flex-column;
  font-size: 30px;
  margin-top: 20px;

  &-title {
    @extend %flex-center;
    font-size: 30px;
    line-height: 2.4rem;
    font-weight: 500;
    border-bottom: $border-default;
  }
}

.ele-table--bordered {
  border: $border-default;

  .ele-table-title {
    border-bottom: none;
  }

  .ele-table-row {
    border-bottom: $border-default;

    &:last-child {
      border-bottom: none;
    }
  }

  .ele-table-cell {
    border-right: $border-default;

    &:last-child {
      border-right: none;
    }
  }
}

.ele-table-row {
  @extend %flex-row;
  width: 100%;
}

.ele-table-row--header {
  font-weight: 500;
}

.ele-table-cell {
  @extend %flex-center;

  &-text {
    padding: 5px 10px;
    text-align: center;
    line-height: 1.5rem;
    word-break: break-all;
  }
}

.ele-table-cell--left {
  justify-content: flex-start;

  .ele-table-cell-text {
    text-align: left;
  }
}

.ele-table-cell--right {
  justify-content: flex-end;

  .ele-table-cell-text {
    text-align: right;
  }
}
