.amplify-table {
  /**
   * Default Table primitive stylings
   */
  border-collapse: var(--amplify-components-table-border-collapse);
  display: var(--amplify-components-table-display);
  width: var(--amplify-components-table-width);
  //these internal css variables are used to update the values that are influenced by multiple modified states
  --amplify-internal-table-caption-font-size: var(
    --amplify-components-table-caption-font-size
  );
  --amplify-internal-table-th-font-size: var(
    --amplify-components-table-header-font-size
  );
  --amplify-internal-table-th-padding: var(
    --amplify-components-table-header-padding
  );
  --amplify-internal-table-td-font-size: var(
    --amplify-components-table-data-font-size
  );
  --amplify-internal-table-td-padding: var(
    --amplify-components-table-data-padding
  );
  --amplify-internal-table-td-border-width: var(
      --amplify-components-table-data-border-width
    )
    0px var(--amplify-components-table-data-border-width) 0px;
  --amplify-internal-table-th-border-width: var(
      --amplify-components-table-header-border-width
    )
    0px var(--amplify-components-table-header-border-width) 0px;

  &--small {
    --amplify-internal-table-caption-font-size: var(
      --amplify-components-table-caption-small-font-size
    );
    --amplify-internal-table-th-font-size: var(
      --amplify-components-table-header-small-font-size
    );
    --amplify-internal-table-th-padding: var(
      --amplify-components-table-header-small-padding
    );
    --amplify-internal-table-td-font-size: var(
      --amplify-components-table-data-small-font-size
    );
    --amplify-internal-table-td-padding: var(
      --amplify-components-table-data-small-padding
    );
  }

  &--large {
    --amplify-internal-table-caption-font-size: var(
      --amplify-components-table-caption-large-font-size
    );
    --amplify-internal-table-th-font-size: var(
      --amplify-components-table-header-large-font-size
    );
    --amplify-internal-table-th-padding: var(
      --amplify-components-table-header-large-padding
    );
    --amplify-internal-table-td-font-size: var(
      --amplify-components-table-data-large-font-size
    );
    --amplify-internal-table-td-padding: var(
      --amplify-components-table-data-large-padding
    );
  }

  &--bordered {
    --amplify-internal-table-td-border-width: var(
        --amplify-components-table-data-border-width
      )
      var(--amplify-components-table-data-border-width)
      var(--amplify-components-table-data-border-width)
      var(--amplify-components-table-data-border-width);
    --amplify-internal-table-th-border-width: var(
        --amplify-components-table-header-border-width
      )
      var(--amplify-components-table-header-border-width)
      var(--amplify-components-table-header-border-width)
      var(--amplify-components-table-header-border-width);
  }

  &__caption {
    caption-side: var(--amplify-components-table-caption-caption-side);
    color: var(--amplify-components-table-caption-color);
    display: var(--amplify-components-table-caption-display);
    font-size: var(--amplify-internal-table-caption-font-size);
    text-align: var(--amplify-components-table-caption-text-align);
    word-break: var(--amplify-components-table-caption-word-break);
  }

  &__head {
    display: var(--amplify-components-table-head-display);
    vertical-align: var(--amplify-components-table-head-vertical-align);
  }

  &__body {
    display: var(--amplify-components-table-body-display);
    vertical-align: var(--amplify-components-table-body-vertical-align);
  }

  &__foot {
    display: var(--amplify-components-table-foot-display);
    vertical-align: var(--amplify-components-table-foot-vertical-align);
  }

  &__row {
    display: var(--amplify-components-table-row-display);
    vertical-align: var(--amplify-components-table-row-vertical-align);
  }

  &__th {
    border-color: var(--amplify-components-table-header-border-color);
    border-style: var(--amplify-components-table-header-border-style);
    border-width: var(--amplify-internal-table-th-border-width);
    color: var(--amplify-components-table-header-color);
    display: var(--amplify-components-table-header-display);
    font-size: var(--amplify-internal-table-th-font-size);
    font-weight: var(--amplify-components-table-header-font-weight);
    padding: var(--amplify-internal-table-th-padding);
    vertical-align: var(--amplify-components-table-header-vertical-align);
    &:first-child {
      border-left-width: var(--amplify-components-table-header-border-width);
    }
    &:last-child {
      border-right-width: var(--amplify-components-table-header-border-width);
    }
  }

  &__td {
    border-color: var(--amplify-components-table-data-border-color);
    border-style: var(--amplify-components-table-data-border-style);
    border-width: var(--amplify-internal-table-td-border-width);
    color: var(--amplify-components-table-data-color);
    display: var(--amplify-components-table-data-display);
    font-size: var(--amplify-internal-table-td-font-size);
    font-weight: var(--amplify-components-table-data-font-weight);
    padding: var(--amplify-internal-table-td-padding);
    vertical-align: var(--amplify-components-table-data-vertical-align);
    &:first-child {
      border-left-width: var(--amplify-components-table-data-border-width);
    }
    &:last-child {
      border-right-width: var(--amplify-components-table-data-border-width);
    }
  }

  /**
   * Data attribute stylings
   */
  &[data-variation='striped'] {
    .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
      background-color: var(
        --amplify-components-table-row-striped-background-color
      );
    }
  }

  &[data-highlightonhover='true'] {
    .amplify-table__row:not(.amplify-table__head *):hover {
      background-color: var(
        --amplify-components-table-row-hover-background-color
      );
    }
  }
}