@import "../../helpers";
.sf-table {
  box-sizing: border-box;
  width: var(--table-width, 100%);
  border: none;
  border-spacing: var(--table-border-spacing, 0);
  &__heading,
  &__row {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }
  &__heading {
    align-items: center;
    padding: var(--table-heading-padding, var(--spacer-sm) 0);
    background-color: var(--table-heading-background, transparent);
    @include border(--table-border-heading, 0 0 2px 0, solid, var(--c-primary));
  }
  &__header {
    @include font(
      --table-header-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.4,
      var(--font-family--secondary)
    );
    color: var(--table-header-color, var(--c-text));
  }
  &__row {
    padding: var(--table-row-padding, var(--spacer-xs) 0);
    background-color: var(--table-row-background);
    box-shadow: var(--table-row-box-shadow);
    @include border(--table-row-border, 0 0 2px 0, solid, var(--c-light));
  }
  &__data {
    color: var(--table-data-color, var(--c-dark-variant));
    @include font(
      --table-data-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--secondary)
    );
  }
  &__data,
  &__header {
    box-sizing: border-box;
    flex: var(--table-column-flex, 0 0 calc(100% / var(--_table-column-width)));
    padding: var(--table-column-padding, 0);
    text-align: var(--table-column-text-align, left);
    &:nth-child(even) {
      order: var(--_table-column-order, 1);
    }
  }
  &--no-border {
    --table-row-border-width: 0;
  }
  @include for-desktop {
    --table-row-padding: var(--spacer-sm) var(--spacer-sm);
    --table-heading-padding: var(--spacer-sm) var(--spacer-sm);
    --table-heading-background: transparent;
    --table-column-flex: 1;
    --_table-column-order: 0;
    --table-header-font-weight: var(--font-weight--normal);
    &--no-border {
      --table-row-border-width: 0;
    }
    &__row {
      &:hover {
        --table-row-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
      }
    }
  }
}