table caption {
  display: none;
}

.maximizable-table.active {
  background: var(--bulma-background);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  table th, table td {
    padding: 0.5em;
  }
}
.maximizable-table.active:hover {
  .maximizable-table__close {
    visibility: visible;
    opacity: 1;
    z-index: 101;
  }
}
.maximizable-table:hover {
  .maximizable-table__open {
    visibility: visible;
    opacity: 1;
  }
}

.maximizable-table__open,
.maximizable-table__close {
  position: absolute;
  right: 1em;
  top: 1em;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s linear;
  box-shadow: var(--bulma-shadow);
}

.table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.table-container__controls {
  padding: 0.5rem;
}
.table-container__table {
  overflow: auto;
  &.dragging {
    -webkit-user-select: none;
    user-select: none;
  }
}

.responsive-table {
  overflow-x: auto;
}

.compact-table {
  th {
    padding: 0 0.5em !important;
  }
  td {
    padding: 0.5em !important;
  }
}

.table tr.is-borderless {
  th, td {
    border-width: 0;
  }
}

.quatoo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0;
  background-color: var(--bulma-scheme-main);
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius);
  th, td {
    padding: 1em;
  }
  th {
    font-weight: 500;
    color: var(--bulma-text);
  }
  td {
    border: 1px solid transparent;
    border-top-color: var(--bulma-border);
    border-width: 1px 0;
    &:first-child {
      border-left-width: 1px;
      border-radius: var(--bulma-radius-small) 0 0 var(--bulma-radius-small);
    }
    &:last-child {
      border-right-width: 1px;
      border-radius: 0 var(--bulma-radius-small) var(--bulma-radius-small) 0;
    }
  }
  tbody tr {
    &:hover {
      td {
        border-color: #CC4A56;
      }
    }
  }

  &.is-bordered {
    border-right: 0;
    th, td {
      border-right: 1px solid var(--bulma-border);
    }
  }
}

.has-vertically-aligned-content td {
  vertical-align: middle;
}

.has-content-top-aligned td {
  vertical-align: top;
}
