/* ----------------------------------------- */
/*  Context Dropdown Menu                    */
/* ----------------------------------------- */

#context-menu {
  height: max-content;
  min-width: 150px;
  max-width: 360px;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--text-color);
  position: absolute;
  width: 100%;
  left: 0;
  z-index: calc(var(--z-index-app) + 1);
  box-shadow: 0 3px 6px rgb(0 0 0 / 45%);

  &.expand-down { top: calc(100% + 2px); }
  &.expand-up { bottom: calc(100% + 2px); }

  ol.context-items, li.context-group > ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li.context-group {
    border-bottom: 1px solid var(--group-separator);
    &:last-child { border: none; }
  }

  li.context-item {
    border: solid transparent;
    border-width: 1px 0;
    padding: 8px;
    margin-bottom: 0;
    line-height: 15px;
    font-size: var(--font-size-12);
    cursor: var(--cursor-pointer);
    transition: 0.1s;
    > i { margin-right: 8px; }
    &:hover {
      border-color: var(--hover-entry-border);
      background: var(--hover-entry-background);
      color: var(--hover-text-color);
    }
  }

  &[popover] {
    position: fixed;
    width: max-content;
    overflow-y: auto;
    z-index: unset;
    inset: unset;
    margin: 0;
    padding: 0;
  }
}

.window-app {
  #context-menu:not([popover]) {
    z-index: calc(var(--z-index-window) + 1);
  }
}

/* ---------------------------------------- */
/*  Autocomplete widget                     */
/* ---------------------------------------- */

#autocomplete {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  color: var(--color-text-primary);
  background: var(--background-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 6px rgb(0 0 0 / 45%);
  min-width: 200px;
  max-height: 40vh;

  li {
    padding: 8px;
    cursor: var(--cursor-pointer);
    background: var(--background-color);

    &.active {
      background: var(--active-background-color);
      color: var(--active-color);
    }
    &.disabled {
      color: var(--color-text-subtle);
      cursor: var(--cursor-default);
    }
  }
}

/* ---------------------------------------- */
/*  Global Tooltip                          */
/* ---------------------------------------- */

#tooltip, .locked-tooltip {
  position: fixed;
  width: max-content;
  max-width: 320px;
  padding: 0.5rem 1rem;
  background: var(--color-cool-5-90);
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  line-height: var(--font-size-16);
  color: var(--color-light-1);
  border-radius: 4px;
  box-shadow: 0 0 4px #000;
  z-index: var(--z-index-tooltip);
  pointer-events: none;
  overflow-wrap: break-word;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  &:where([popover]) {
    display: block;
    margin: unset;
    inset: unset;
    border: unset;
  }

  &.text-right {
    text-align: right;
  }

  // Transition visibility
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 500ms, opacity 500ms;
  &.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 500ms;
  }
  &.tour {
    pointer-events: all;
  }

  // Toolclips
  .toolclip {
    p {
      text-align: left;

      &.faint {
        text-align: center;
        font-size: var(--font-size-14);
        color: #c9c7b8;
      }
    }

    h4 {
      text-align: center;
      font-size: var(--font-size-18);
      font-weight: bold;
      font-family: var(--font-sans);
    }

    video {
      max-width: calc(320px - 2rem);
      height: calc(320px - 2rem);
    }
  }
}

.locked-tooltip {
  pointer-events: all;
  border: 1px solid var(--color-warm-2);
}

/* ---------------------------------------- */
/*  Alternative Buttons                     */
/* ---------------------------------------- */

// Plain
button.plain,
a.button.plain {
  --button-background-color: transparent;
  --button-border-color: transparent;
  --button-hover-background-color: transparent;
  --button-focus-outline-color: transparent;
}

// Icon-Only (Font Awesome)
button.icon,
a.button.icon {
  font-family: var(--font-awesome);
  flex: 0 0 var(--button-size);
  width: var(--button-size);
  &.fa-duotone {
    font-family: var(--font-awesome-duotone);
  }
}

// Icon buttons in certain custom elements
file-picker, document-tags, string-tags {
  > button.icon {
    flex-basis: 36px;
  }
}

// UI Controls
button.ui-control,
a.ui-control,
li.ui-control,
div.ui-control,
.placeable-hud .control-icon,
.placeable-hud input  {
  flex: none;
  width: var(--control-size);
  height: var(--control-size);
  justify-content: center;
  align-content: center;
  background: var(--control-bg-color);
  border: 1px solid var(--control-border-color);
  border-radius: 4px;
  color: var(--control-icon-color);
  font-size: var(--font-size-16);
  pointer-events: all;
  transition: border 0.25s, color 0.25s;
  text-shadow: none;

  // Remove focus indicator
  &:focus {
    outline: none;
    box-shadow: none;
    text-shadow: none;
  }

  // Hovered Control
  &:hover {
    text-shadow: none;
    background: var(--control-hover-bg-color);
    border-color: var(--control-hover-border-color);
    color: var(--control-hover-icon-color);
  }

  // Toggled Control
  &.toggle {
    --control-bg-color: var(--toggle-bg-color);
    --control-border-color: var(--toggle-border-color);
    --control-active-bg-color: var(--toggle-active-bg-color);
    --control-active-border-color: var(--toggle-active-border-color);
    --control-hover-border-color: var(--toggle-active-border-color);
  }

  // Button Control
  &.button {
    --control-border-color: var(--control-button-border-color);
    --control-hover-bg-color: var(--control-button-hover-bg-color);
    --control-hover-border-color: var(--control-button-hover-border-color);
  }

  // Active Control
  &[aria-pressed=true] {
    background: var(--control-active-bg-color);
    border-color: var(--control-active-border-color);
    color: var(--control-active-icon-color);
    cursor: var(--cursor-default);
    &.toggle {
      cursor: var(--cursor-pointer);
    }
  }

  // Disabled Control
  &[disabled], &.disabled {
    opacity: 0.4;
  }

  // Font Awesome Stacking
  &.fa-stack {
    font-size: 0.5em;
    > i {
      line-height: 2em;
    }
  }
}

button.ui-control,
.placeable-hud button.control-icon {
  --button-size: var(--control-size);
}

.split-button {
  display: flex;

  .ui-control {
    border-radius: 0;
    border-inline-end-width: 0;

    &:first-child {
      border-start-start-radius: 4px;
      border-end-start-radius: 4px;
    }

    &:last-child {
      border-start-end-radius: 4px;
      border-end-end-radius: 4px;
      border-inline-end-width: 1px;
    }

    &:hover + .ui-control { border-inline-start-color: var(--control-hover-border-color); }
    &[aria-pressed=true] + .ui-control { border-inline-start-color: var(--control-active-border-color); }

    &:focus {
      outline: none;
      box-shadow: none;
      border-color: var(--control-active-border-color);

      + .ui-control { border-inline-start-color: var(--control-active-border-color); }
    }
  }

  &.vertical { writing-mode: tb; }
}

.inline-control {
  --button-size: 24px;
  --button-background-color: transparent;
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  &:disabled {
    --button-text-color: var(--color-text-subtle);
    opacity: 0.75;
  }
}

/* ---------------------------------- */
/*  Notification Pips                 */
/* ---------------------------------- */

.notification-pip {
  background: var(--color-warm-2);
  text-shadow: 1px 1px 3px black;
  position: absolute;
  top: -1px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 100%;

  &:not(.active) { display: none; }
}

.icon-fa-rectangle {
  --fa: "";
  --fa--fa: "";
  &:before { transform: scaleY(0.75); }
}

.icon-fa-ellipse {
  --fa: "";
  --fa--fa: "";
  &:before { transform: scaleY(0.75); }
}

.icon-fa-cone {
  --fa: "";
  --fa--fa: "";
  &:before { transform: scale(-2, 2) translate(25%, 25%); }
}