.default {
  --bg-hover: var(--purple-3);
  --bg-selected: var(--purple-9);
  --bg-hover-dots: var(--purple-5);
  --bg-selected-dots-hover: var(--purple-11);

  height: var(--space-6);
  cursor: default;
  color: var(--slate-12);
  border-radius: var(--radius-2);

  .icon {
    color: var(--bg-selected);
  }

  .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .contextualTrigger {
    flex-shrink: 0;
  }

  .dots {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--slate-12);
    border-radius: var(--radius-1);

    &:hover {
      cursor: pointer;
      background-color: var(--bg-hover-dots);
    }
  }

  /* While the contextual menu is open, the dots button should always show */
  &:has(.contextualTrigger[data-state="open"]) .dots {
    display: flex;
  }

  /* .hovered className required for when hover is programmatically applied to layers when hovering them in the preview */
  &.hovered,
  &:hover {
    background-color: var(--bg-hover);
    &.open {
      border-radius: var(--radius-2);
    }
    .dots {
      display: flex;
    }
  }

  &.selected {
    color: white;
    background-color: var(--bg-selected);
    &.open {
      border-radius: var(--radius-2) var(--radius-2) 0 0;
    }

    .icon {
      color: white;
    }

    .dots {
      color: white;

      &:hover {
        color: white;
        background-color: var(--bg-selected-dots-hover);
      }
    }
  }
  &.disabled {
    pointer-events: none;
    filter: grayscale(100%) opacity(50%);
    backdrop-filter: grayscale(100%) opacity(50%);
  }
  &.draggable {
    cursor: grab;
    button {
      cursor: pointer;
    }
  }
}

.open {
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}

.componentVariant {
  composes: default;
}

.codeComponentVariant {
  composes: default;
}

.dynamicComponentVariant {
  composes: default;
}

.blockComponentVariant {
  composes: default;
}

.patternVariant {
  composes: default;
}

.slotVariant {
  composes: default;
}

.codeVariant {
  --bg-hover: var(--blue-3);
  --bg-selected: var(--blue-9);
  --bg-hover-dots: var(--blue-5);
  --bg-selected-dots-hover: var(--blue-11);

  composes: default;
}

.regionVariant {
  --bg-hover: var(--grass-3);
  --bg-selected: var(--grass-9);
  --bg-hover-dots: var(--grass-5);
  --bg-selected-dots-hover: var(--grass-11);

  composes: default;
}

.pageVariant, .homepageVariant, .templateVariant {
  --bg-hover: var(--blue-3);
  --bg-selected: var(--blue-9);
  --bg-hover-dots: var(--blue-5);
  --bg-selected-dots-hover: var(--blue-11);

  composes: default;
}

/* Special case for the contextual accordion inside the sidebar */
.contextualAccordionVariant {
  --bg-hover: none;
  --bg-selected: none;
  --bg-hover-dots: var(--blue-3);
  --bg-selected-dots-hover: var(--blue-5);

  composes: default;

  .dots {
    &:hover {
      color: var(--blue-9);
    }
  }
}
