html {
  font-family: system-ui, sans-serif;

  &.resizing {
    cursor: col-resize;
    -webkit-user-select: none;
    user-select: none;

    .split-view {
      pointer-events: none;
    }
  }
}


.split-view {
  display: flex;
  height: 100vh;
  margin: 0;

  aside,
  section {
    display: flex;
    overflow: auto;
    flex: auto;
    min-width: 200px;
  }

  /* kan deze background ook gebruiken voor darkmode  */
  aside:focus tbody tr.selected {
    background-color: rgb(3, 100, 225); 
    color: white;
  }

  aside {
    scroll-padding-top: 2rem;

    &:focus {
      outline: none;
    }

    table,
    textarea {
      font-size: 0.75rem;
    }

    table {
      width: 100%;
      min-width: 0;
      height: fit-content;
      border-spacing: 0;

      td,
      th {
        padding: 0.75em 1.25em;
        text-align: left;
        white-space: nowrap;
      }

      thead tr th {
        position: sticky;
        top: 0;
        background-color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgb(230, 230, 230);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }

      tbody tr {
        cursor: pointer;

        &:nth-child(odd) {
          background-color: rgb(245, 245, 245);
        }

        &.selected {
          cursor: inherit;
          background-color: rgb(220, 220, 220);
        }
      }
    }
  }

  section form {
					display: flex;
					flex-direction: column;
					flex: auto;
  }

  section textarea {
    flex: auto;
    resize: none;
    border: 0;
    padding: 0.75em 1.25em;
  }

  section input[type=submit] {
    position: absolute;
    top: 1em;
    right: 1em;
  }

  section input[type=submit]:not(:disabled) {
    cursor: pointer;
  }

  .resize-handle {
    flex: 0 0 5px;
    cursor: col-resize;
    background-color: rgb(230, 230, 230);
  }
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  html, 
  .split-view section textarea {
    background-color: rgb(30, 30, 30);
    color: white;
  }

  .split-view {
    aside:focus tbody tr.selected {
      background-color: rgb(4, 88, 209);
    }

    aside table {
      thead tr th {
        background-color: rgba(30, 30, 30, .8);
        border-bottom: 1px solid rgb(57, 57, 57);
      }

      tbody tr {
        &:nth-child(odd) {
          background-color: rgb(41, 41, 41);
        }

        &.selected {
          background-color: rgb(70, 70, 70);
          color: white;
        }
      }
    }

    section textarea {
      background-color: rgb(30, 30, 30);
    }

    .resize-handle {
      background-color: rgb(57, 57, 57);;
    }
  }
}