// stylelint-disable selector-type-no-unknown

.table
{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid $border-color-secondary;

  thead
  {
    th
    {
      border: 0;
      border-right: 1px solid $border-color-primary;
      padding: 0;
      background: $haze;

      &:last-child
      {
        border-right-color: transparent;
      }

      &.th-not-sortable,
      &.th-sortable button
      {
        padding: 11px 15px 12px;
        color: $font-color-primary;
        font-weight: $font-weight-semi-bold;
        font-size: $font-size-md;
        font-family: $font-family-default;
        text-align: left;
      }

      &.th-sortable button
      {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        cursor: pointer;

        &::after
        {
          margin-left: 10px;
          opacity: 0.5;
          content: $icon-caret-down;
          font-size: $font-size-lg;
          line-height: 1;
          font-family: $font-family-icon;
          transform: translateY(-2px);
        }
      }

      &.th-expandable
      {
        width: 44px;
        border-right: 0;
      }

      &[aria-sort]
      {
        &.th-sortable button::after
        {
          opacity: 1;
        }
      }

      &[aria-sort="ascending"]
      {
        &.th-sortable button::after
        {
          content: $icon-caret-up;
        }
      }

      &[aria-sort="descending"]
      {
        &.th-sortable button::after
        {
          content: $icon-caret-down;
        }
      }

      &.more-actions // col containing ellipses button
      {
        width: 40px;
      }
    }
  }

  tbody
  {
    tr
    {
      &.tr-stripe-even
      {
        background: $coconut;
      }

      &.tr-stripe-odd
      {
        background: $cloud;
      }

      &.tr-expandable td > :last-child
      {
        margin-bottom: 0;
      }

      &:hover
      {
        outline: 1px solid $accent-color-primary;
        background: $ice;
      }

      th,
      td
      {
        vertical-align: middle;
        border: 0;
        padding: 11px 15px 12px;
        transition: padding $transition-primary;

        &.td-expandable
        {
          padding: 0;

          button
          {
            min-width: 44px;
            min-height: 44px;
            color: $font-color-primary;
            font-size: $font-size-lg;
          }

          & + .td-selectable
          {
            padding-left: 0;
          }
        }

        &.actions // col containing 1-2 action buttons
        {
          padding: 9px 10px 9px 15px;

          .action-items
          {
            display: flex;
            align-items: center;
          }
        }

        &.more-actions // col containing ellipses button
        {
          padding: 6px 10px;

          .more-actions-toggle
          {
            font-size: 18px;

            i
            {
              vertical-align: middle;
            }
          }
        }
      }
    }

    .table-empty
    {
      text-align: center;

      &:hover
      {
        outline: 0;
        background: $coconut;
      }

      & td
      {
        font-weight: $font-weight-semi-bold;
      }
    }
  }

  bp-checkbox label.checkbox
  {
    margin-bottom: 0;
  }

  &.table-compact
  {
    tbody
    {
      tr
      {
        th,
        td
        {
          padding: 8px 15px;
          transition: padding $transition-primary;

          &.td-expandable
          {
            padding: 0;
          }

          &.actions // col containing 1-2 action buttons
          {
            padding: 6px 10px 6px 15px;
          }

          &.more-actions // col containing ellipses button
          {
            padding: 6px 10px;
            text-align: center;
          }
        }
      }
    }
  }

  &.table-selectable-rows
  {
    thead
    {
      tr
      {
        th.th-selectable
        {
          vertical-align: bottom;
          width: 30px;
          border-right: 0;
          padding: 0 0 12px 15px;
        }

        th.th-expandable + .th-selectable
        {
          padding-left: 0;
        }
      }
    }

    tbody
    {
      tr
      {
        td.td-selectable
        {
          padding: 0 0 0 15px;
        }

        td.td-expandable + .td-selectable
        {
          padding-left: 0;
        }
      }
    }
  }
}

.table.table-bordered-rows
{
  margin-bottom: 20px;
  border: 0;
  color: $font-color-primary;

  thead tr th
  {
    padding: 0 12px 5px;
  }

  thead tr th,
  tbody tr th,
  th,
  td
  {
    vertical-align: middle;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid $border-color-primary;
    padding: 12px;
    background: transparent;
    font-weight: $font-weight-semi-bold;

    &:first-child
    {
      padding-left: 0;
    }

    &:last-child
    {
      padding-right: 0;
    }
  }

  tbody tr
  {
    &:nth-child(odd),
    &:nth-child(even)
    {
      background: transparent;
    }

    &:hover
    {
      outline: 0;
      background: transparent;
    }

    &.parent-row td
    {
      border-bottom: 0;
    }
  }

  th
  {
    color: $font-color-secondary;
  }

  td
  {
    color: $font-color-primary;

    .table.table-bordered-rows
    {
      margin-bottom: 0;

      tbody tr:last-of-type td
      {
        border-bottom: 0;
      }
    }

    p
    {
      margin-bottom: 0;
    }
  }
}