// Hydrogen / Component / Styles

// This reset mixin is used to specify component level style resets if they're needed. These styles only apply to the versioned instance of the component.
@mixin h2-component-table-reset() {}

// This mixin specifies generic styles that apply to all variations/combinations of this component.
@mixin h2-component-table-generic(
  $mqMedium,
  $black
) {
  overflow: auto;
  width: 100%;

  table {
    border-color: $black;
    border-style: solid;
    border-width: 1px;
    border-collapse: collapse;
    min-width: 40rem;
    text-align: left;

    @media #{$mqMedium} {
      min-width: 100%;
    }
      
  }

}

// Load your custom mixins here.
@mixin h2-component-table-color(
  $headColor,
  $headFontColor,
  $rowColor
) {

  table {

    thead {
      tr {
        th {
          background-color: $headColor;
          color: $headFontColor;
        }
      }
    }

    tbody {
      tr {
        &:nth-child(even) {
          background-color: rgba($rowColor, .2);
        }
        th {
          background-color: rgba($rowColor, .2);
        }
      }
    }

  }

}