/* Lots of Matcha.css overrides here */

/* Default to using the entire page width */
:root {
  --ct-width: 100%;
}

body > footer:last-child, body > header:first-child {
  margin-left: 0;
  margin-right: 0;
}

/* Makes our login page descriptive paragraph look janky with the default hyphens */
p {
  hyphens: unset;
}

/* Don't want to auto-round our image borders */
img {
  border-radius: 0;
}

/* Trim the fieldsets so they're more event */
fieldset {
  margin-bottom: 0;
}

/* Remove the strange italic put on strong by default */
strong {
  font-style: normal;
}

/* Clear the red fg/bg default and be more plain */
del {
  background-color: unset;
  color: inherit;
  padding: 0;
}

/* User requested that the input fields be more traditional looking, so thicker and blockier is used */
input:not([type]),
input[type='text'],
input[type='number'],
input[type='password'],
textarea,
select {
  border-width: 2px;
  border-style: inset;
  border-radius: 2px;
  line-height: 1;
}

/* Our data tables can just let the parent do the scrolling instead of inline */
table {
  overflow-x: unset;
}

table:not(.no-alternate):not(.alternate-row) {
  background-color: var(--bg-default);
}

table:not(.no-alternate) .alternate-row,
table:not(.no-alternate) tbody > tr:nth-child(even) {
  background-color: var(--bg-subtle);
  background-color: color-mix(in srgb, var(--bg-subtle), white 5%);
}

.no-alternate tbody > tr:nth-child(odd),
.no-alternate tbody > tr:nth-child(even) {
  background-color: unset !important;
}

.inline,
.inline label,
.inline input {
  display: inline-block !important;
}

.inline select {
  display: inline-block;
  width: fit-content;
}

button {
  background-color: var(--bg-default);
}

/* Other buttons (like success) hover their background, but muted isn't in the list */
button.muted:not(:disabled):hover {
  background: var(--muted);
}

/* Example of mapping built in colors to checkboxes for background coloring and hovering, instead of default blue */
input.variant[type='checkbox']:checked {
  background: var(--variant);
}
input.variant[type='checkbox']:checked,
input.variant:not(:disabled):hover,
input.variant[type='checkbox']:hover {
  border-color: var(--variant);
}
input.success[type='checkbox']:checked {
  background: var(--success);
}
input.success[type='checkbox']:checked,
input.success:not(:disabled):hover,
input.success[type='checkbox']:hover {
  border-color: var(--success);
}
input.danger[type='checkbox']:checked {
  background: var(--danger);
}
input.danger[type='checkbox']:checked,
input.danger:not(:disabled):hover,
input.danger[type='checkbox']:hover {
  border-color: var(--danger);
}

/* If desired can ignore green/red border coloring based on inputs state */
.matcha-no-input-colors {
  input:user-valid,
  select:user-valid,
  textarea:user-valid,
  input:user-invalid,
  select:user-invalid,
  textarea:user-invalid {
    border: none !important;
  }
}

/* Quill override the built in 13px font and family */
.ql-container {
  font-family: inherit !important;
  font-size: inherit !important;
}

/* Quill override the toolbar to prevent dark mode conflicts with Matcha */
.ql-toolbar {
  background-color: #fefefe !important;
  border: 1px solid #ccc !important;
}

/* Quill input field inside tooltips such as the link dialog */
.ql-tooltip input {
  background-color: white !important;
  color: black !important;
}