.action-row {
  @extend .d-flex;
  @extend .p-2;
  @extend .mt-5;

  // background-color: map-get($theme-colors, "primary");
  background-color: var(--bs-tertiary-bg);

  * {
    @extend .me-2;
    @extend .my-auto;
  }
}

// // Fix trix dark mode
// .trix-button-row {
//   .trix-button-group {
//       border: var(--bs-border-width) solid var(--bs-border-color);

//       .trix-button {
//           border: 0;
//       }
//   }
// }

// [data-bs-theme=dark] {
//   .trix-button-row {
//       .trix-button-group {
//           .trix-button {
//               background-color: transparent;
//               filter: invert(100%);
//           }
//       }
//   }
// }
// // end fix trix dark mode

// .trix-content pre {
//   background-color: var(--bs-secondary-bg);
//   color: var(--bs-secondary-color);
//   border: var(--bs-border-width) solid var(--bs-border-color);
//   border-radius: var(--bs-border-radius);
//   padding: var(--bs-padding);
// }

.hover-row:hover {
  background-color: var(--bs-tertiary-bg);
}

.comment {
  @extend .alert;
  @extend .alert-warning;

  border: 0;
  border-left: 4px solid var(--bs-warning);
}

.navbar-brand {
  color: $pink;
}

.form-label {
  font-size: 1.3rem;
}

.highlight-when-nonempty:not([value=""]) {
  @extend .border-primary
}

@mixin details-icon($color) {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
  background-size: cover;
}

.page_nav nav ul {
  padding-left: 0;
  list-style-type: none;
  line-height: 2rem;

  a {
    color: var(--bs-text);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  ul {
    // padding-left: 1.5rem;
  }
}


summary,
summary a {
  font-size: 1rem;
  font-style: normal;
}

summary {
  display: flex;
  line-height: 2rem;
}

summary::before {
  @include details-icon(to-rgb(map-get($theme-colors, "dark")));
  content: '';
  float: inline-end;
  width: 0.7rem;
  height: 1rem;
  margin-top: 0.5rem;
  margin-right: 6px;
  // background: url('chevron-right.svg');
  // background-size: cover;
  margin-left: 0;
  transition: 0.2s;
}

@include color-mode(dark) {
  summary::before {
    @include details-icon(to-rgb(map-get($theme-colors, "light")));
    // content: '';
    // float: inline-end;
    // width: 0.7rem;
    // height: 1rem;
    // margin-top: 0.5rem;
    // margin-right: 6px;
    // // background: url('chevron-right.svg');
    // // background-size: cover;
    // margin-left: 0;
    // transition: 0.2s;
  }
}

details[open]>summary::before {
  transform: rotate(90deg);
}