<template>
  <table class="base-table">
    <thead>
      <tr>
        <slot name="thead" />
      </tr>
    </thead>
    <tbody>
      <slot name="tbody" />
    </tbody>
  </table>
</template>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.base-table {
  font-family: "Avenir";
  border-collapse: collapse;
  width: 100%;
  text-align: left;

  tr:hover > td {
    background: $neutral-1;
  }

  th {
    border-bottom: 1px solid #ddd;
    padding: 8px 8px 12px;
    color: $neutral-7;
    font-size: 14px;

    div {
      display: flex;
      align-items: center;
      width: fit-content;

      svg {
        height: 16px;
        width: 16px;
        margin-left: 4px;
        cursor: pointer;

        g {
          fill: #a9b0b8;
        }
      }
    }
  }

  td {
    transition: all 0.3s;
    padding: 16px 8px;
    border-bottom: 1px solid $neutral-2;
    font-size: 14px;
    color: $neutral-6;

    svg {
      height: 20px;
      width: 20px;
      cursor: pointer;
    }
  }

  .selected > td,
  .selected:hover > td {
    background: $success-1;
  }

  .base-checkbox-group {
    .label:after {
      left: 0px;
    }
  }
}
</style>
