@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --text-main: #333;
    --text-secondary: #4b525d;
    --bg-active: #fbfbfc;
  }

  html.dark {
    --text-main: #f7f7f7;
    --text-secondary: #6f6e84;
    --bg-active: #242b40;
  }
}

.collapse-title,
:where(.collapse > input[type='checkbox']) {
  padding: 0;
  padding-right: 0;
  min-height: unset;
}

.collapse-open :where(.collapse-content),
.collapse:focus:not(.collapse-close) :where(.collapse-content),
.collapse:not(.collapse-close)
  :where(input[type='checkbox']:checked ~ .collapse-content) {
  padding-bottom: 0;
}

.table th:first-child {
  position: relative;
  z-index: 2;
}