@import "./mixins/mixins.scss";

@include themes-mixin {
  @include b(table) {
    @include once {
      font-size: 14px;
      width: 100%;
      border-radius: 6px;
      text-align: left;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      transition:
        background-color .3s $--n-ease-in-out-cubic-bezier,
        border-color .3s $--n-ease-in-out-cubic-bezier,
        color .3s $--n-ease-in-out-cubic-bezier;
    }
    border: 1px solid $--table-border-color;
    background: $--table-body-background-color;
    @include e(th) {
      @include once {
        background-clip: padding-box;
        white-space: nowrap;
        transition:
          background-color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier,
          color .3s $--n-ease-in-out-cubic-bezier;
        text-align: inherit;
        padding: 14px 12px;
        vertical-align: inherit;
        font-style: none;
        text-transform: none;
        border: none;
        font-weight: 500;
      }
      color: $--table-header-text-color;
      background-color: $--table-header-background-color;
      border-color: $--table-border-color;
      border-bottom: 1px solid $--table-border-color;
    }
    @include e(td) {
      @include once {
        transition:
          background-color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier,
          color .3s $--n-ease-in-out-cubic-bezier;
        padding: 12px;
      }
      color: $--table-body-text-color;
      background-color: $--n-table-body-background-color;
    }
  }
}