.table {
  width: 100%;
  border: 0;
  border-spacing: 0;

  th {
    text-align: left;
    padding: 0.42rem 0.5rem;
    font-weight: 400;
    border-bottom: 0;
    opacity: 0.6;
  }

  &-input {
    position: relative;
    background-color: transparent;
    padding: 0.5rem;

    .checkbox-control > div {
      width: 1.1rem;
      height: 1.1rem;
      padding: 0;
    }

    input {
      width: 100%;
      border: 0;
      padding: 0;
      background: 0;
      color: inherit;

      &[type='number'] {
        font-weight: 600;
      }
    }
  }

  &-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;
    white-space: nowrap;
  }

  &-min {
    white-space: nowrap;
    width: 1px;
  }

  &-action {
    border: 0;
    cursor: pointer;
    margin: 0;
    min-width: 1px;
    padding: 0 0.25rem;
    text-align: center;
    width: 1.5rem;

    &.-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &.-hover .btn {
      visibility: hidden;
    }

    + .table-action {
      padding-left: 0;
    }

    .btn {
      font-size: 0.875rem;
      text-align: center;
      vertical-align: middle;
    }
  }

  tr {
    &.-action {
      cursor: pointer;

      &:hover {
        background-color: var(--theme-color-o10);

        td,
        + tr td {
          border-color: transparent;
        }
      }
    }

    &.-divider {
      td {
        padding: 1rem 0;
        border: 0;
      }

      + tr > td {
        border-top: 0;
      }
    }

    &:first-child > td {
      border-top: 0;
    }

    + tr > td {
      //border-left: 1px solid var(--theme-color-o20);
      border-top: 1px solid var(--theme-background-150);

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

    &:hover .table-action.-hover .btn {
      visibility: visible;
    }
  }

  td {
    .badge {
      position: relative;
      bottom: 2px;
    }

    + td {
      //border-left: 1px solid var(--theme-color-o20);
      border-top: 1px solid var(--theme-background-200);
    }
  }

  tr:last-child > td {
    border-bottom: 0;
  }

  &--inset {
    margin: 0 -1rem 0 -1rem;
    width: calc(100% + 2rem);

    thead th {
      &:first-child {
        padding-left: 1rem;
      }
      &:last-child {
        padding-right: 1rem;
      }
    }

    tbody td {
      &:first-child {
        padding-left: 1rem;
      }
      &:last-child {
        padding-right: 1rem;
      }
    }
  }
  .table-sortable {
    cursor: pointer;
    white-space: nowrap;
    opacity: 1;

    span {
      opacity: 1;
      color: var(--theme-color-base);

      &:last-child {
        opacity: 0.5;
        color: var(--theme-color-100);
      }
    }

    &__direction {
      font-size: 0.75rem;
      margin-left: 0.25rem;
      display: inline-block;
      transition: transform 0.2s;
      color: var(--theme-color-base);

      &--desc {
        transform: rotateZ(180deg);
      }
    }

    &:hover {
      opacity: 1;
    }
  }
}
