.bookmark-toggle {
  --bl-icon-color: var(--bs-primary);

  .no-js & {
    input[type="submit"] {
      display: inline;
    }

    .toggle-bookmark {
      display: none;
    }
  }

  input[type="submit"] {
    display: none;
  }

  .toggle-bookmark {
    cursor: pointer;

    .toggle-bookmark-label {
      font-weight: inherit;
      min-width: 8.5em;

      .blacklight-icons svg {
        height: 1.25rem;
        width: 1.25rem;
        overflow: visible;
        fill: var(--bl-icon-color);

        &.bookmark-checked {
          display: none;
        }
      }
    }

    .toggle-bookmark-input:checked + span svg {
      &.bookmark-checked {
        display: inherit;
      }

      &.bookmark-unchecked {
        display: none;
      }
    }
  }

  /* override for line 21.
      Creates weird spacing in toolbar when min-width is set to 8rem */
  .header-tools .toggle-bookmark-label {
    min-width: 2rem;
  }
}