@use "./../variables" as *;

.table {
  width: 100%;

  & td,
  & th {
    padding: $table-cell-padding-y $table-cell-padding-x;
    vertical-align: $table-cell-valign;
    border-style: $table-cell-border-style;
    border-color: var(--border-color-main);
    border-width: 0 0 $table-cell-border-width 0;
  }

  & thead {
    & tr {
      background-color: $table-head-background-color;

      & > * {
        border-width: 0 0 $table-th-border-width 0;
      }
    }
  }

  & tbody {
    & tr {
      background-color: $table-background-color;
    }
  }

  & tfoot {
    & tr {
      & > * {
        border-width: $table-th-border-width 0 $table-cell-border-width 0;
      }
    }
  }

  &.table--small {
    & td,
    & th {
      padding: $table-small-cell-padding-y $table-small-cell-padding-x;
    }
  }

  &.table--bordered {
    & td,
    & th {
      border-width: $table-cell-border-width;
    }

    & thead {
      & tr {
        & > * {
          border-width: $table-cell-border-width $table-cell-border-width $table-th-border-width
            $table-cell-border-width;
        }
      }
    }

    & tfoot {
      & tr {
        & > * {
          border-width: $table-th-border-width $table-cell-border-width $table-cell-border-width
            $table-cell-border-width;
        }
      }
    }
  }

  &.table--striped {
    & tbody {
      & tr {
        &:nth-of-type(even) {
          background-color: hsl(from var(--html-color) h s l / #{$table-striped-background-opacity});
        }

        &:nth-of-type(odd) {
          background-color: hsl(from var(--light) h s l / #{$table-striped-background-opacity});
        }
      }
    }
  }

  &.table--hover {
    & tbody {
      & tr {
        &:hover {
          & > * {
            background-color: hsl(from var(--html-color) h s l / #{$table-striped-background-opacity});
          }
        }
      }
    }
  }
}