$component-identifier: '.table';

#{$component-identifier} {
  width: 100%;
  text-align: center;

  &.m-zebra {
    #{$component-identifier}__body #{$component-identifier}__row:nth-child(2n+0) {
      background-color: $color-blue1;
    }
  }

  &.m-borderless {
    #{$component-identifier} {
      &__row {
        border: 0;
      }

      &__header #{$component-identifier}__row {
        border-bottom: 1px solid $border-color;
      }

      &__header {
        background: none;
      }
    }
  }

  &.is-vertical {
    text-align: left;

    #{$component-identifier}__header-item {
      background-color: $color-gray2;
    }
  }

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

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

  &__row {
    border: 1px solid $border-color;
  }

  &__header {
    background-color: $color-gray2;
  }

  &__data-item {
    border: 0;
    vertical-align: top;

    &.m-center {
      text-align: center;
    }

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

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

$component-identifier: '';