:where(.table) {
  th {
    font-size: var(--text-xs);
  }
  tr.child-row {
    --border: 0;
  }


  tr:hover {
    /* background-color: unset !important; */
  }

  th, td {
    padding: var(--size-1) var(--size-2) !important;
  }
}

.table--bordered {
  td, th {
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }
  tr td:first-child,
  tr th:first-child {
    border-left: 0;
  }
  tr td:last-child,
  tr th:last-child {
    border-right: 0;
  }
}

.table--budget {
  th, tfoot td {
    font-size: var(--text-xs);
  }
  tr {
    &:hover {
      background-color: unset;  
    }
  }

  tr:hover {
    input {
      background-color: var(--gray-50);
    }
    .btn--delete {
      visibility: visible;
    }
  }

  .btn--delete {
    visibility: hidden;
  }
  tfoot {
    background-color: unset;
    
    td:not(:first-child) {
      transition: opacity 0.5s ease-in-out;
      opacity: 0;
      /* visibility: hidden; */
    }
    &:hover {
      background-color: unset;
    }
  }
}

.budget-category:hover tfoot td {
  /* visibility: visible; */
  opacity: 1;
}




table#importer {
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    position: relative;
  }

  th {
      background-color: #f2f2f2;
      font-weight: bold;
      color: #333;
  }

  td {
      background-color: white;
  }

  td:focus {
      background-color: #e3f2fd;
      outline: 2px solid #2196F3;
      outline-offset: -2px;
  }

  tr:nth-child(even) td {
      background-color: #f9f9f9;
  }

  tr:nth-child(even) td:focus {
      background-color: #e3f2fd;
  }

  .validation-error {
    background-color: #ffdddd;
    border: 1px solid #ffdddd;
    color: #ff0000;
  }

  .cell-input {
      width: 100%;
      border: none;
      background: transparent;
      padding: 4px;
      font-family: inherit;
      font-size: inherit;
  }

  .cell-input:focus {
      outline: none;
  }

  .controls {
      margin-bottom: 20px;
      text-align: center;
  }

  button {
      background-color: #2196F3;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 5px;
      font-size: 14px;
  }
}