.quick-tagger {
  max-width: 40rem;
}

/* The link's own fields, shown read-only until "Edit details" swaps in the
   form. Kept at the top level so the frame looks right on its own page too. */
.quick-tagger-title {
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}

.quick-tagger-url {
  margin: 0;
  font-size: 0.875em;
  overflow-wrap: anywhere;

  svg {
    height: 0.875em;
    margin-left: 0.25em;
    vertical-align: middle;

    & * {
      fill: var(--fg-color);
    }
  }
}

.quick-tagger-description {
  color: var(--mid-color);
}

form.button_to:has(.quick-tagger-edit) {
  margin: 1rem 0;
}

.quick-tagger-edit {
  font: inherit;
  font-size: 0.875em;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.5em 1.25em;
  border: 0.0625rem solid var(--border-color);
  border-radius: 0.5em;
  background: none;
  color: var(--link-color);
  cursor: pointer;
  transition: 0.2s ease all;

  &:hover {
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
}

.quick-tagger-details-form {
  margin-bottom: 1.5rem;
}

.quick-tagger-details-actions {
  display: flex;
  align-items: center;
  gap: 1rem;

  /* Undo the global full-width submit styling; this row holds save + cancel. */
  input[type=submit] {
    width: auto;
    margin-bottom: 0;
    padding: 0.75em 1.5em;
  }
}

.quick-tagger-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;

  input[type=submit] {
    width: auto;
    margin-bottom: 0;
    padding: 0.75em 1.5em;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

.quick-tagger-hint {
  margin-left: auto;
  font: inherit;
  font-size: 0.8em;
  color: var(--mid-color);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.25em 0;
  border: none;
  background: none;
  cursor: pointer;

  &:hover {
    color: var(--fg-color);
  }
}