.context-menu-sub-trigger {
  display: flex;
  align-items: center;
  padding: var(--spacing) calc(var(--spacing) * 2);
  border: none;
  border-radius: var(--radius-sm);
  outline: none;
  background-color: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-sm--line-height);
  user-select: none;

  /* Focus */
  &:focus,
  &[data-state="open"] {
    background-color: var(--color-accent);
    color: var(--color-accent-foreground);
  }

  &.context-menu-sub-trigger {
    padding-block: calc(var(--spacing) * 1.5);

    & > svg {
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
      margin-inline-start: auto;
    }

    &[data-inset] {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
}

.context-menu-content,
.context-menu-sub-content {
  z-index: 50;
  padding: var(--spacing);
  overflow: hidden;
  transform-origin: var(--radix-context-menu-content-transform-origin);
  animation-duration: var(--default-transition-duration);
  animation-timing-function: var(--ease-out);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-popover);
  box-shadow: var(--shadow-md);
  color: var(--color-popover-foreground);

  &.context-menu-content {
    width: calc(var(--spacing) * 52);
  }

  &.context-menu-sub-content {
    min-width: 8rem;
    box-shadow: var(--shadow-lg);
  }

  /* State */
  &[data-side="top"] {
    animation-name: var(--animate-slide-top);
  }

  &[data-side="bottom"] {
    animation-name: var(--animate-slide-bottom);
  }

  &[data-side="left"] {
    animation-name: var(--animate-slide-left);
  }

  &[data-side="right"] {
    animation-name: var(--animate-slide-right);
  }

  &[data-state="closed"] {
    animation-name: var(--animate-fade-zoom-out);
  }

  .context-menu-item {
    display: flex;
    position: relative;
    align-items: center;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    outline: none;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    cursor: default;
    user-select: none;
    gap: calc(var(--spacing) * 2);

    /* Icon */
    & > svg {
      flex-shrink: 0;
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
      pointer-events: none;
    }

    /* Variant */
    &[data-variant="destructive"] {
      color: var(--color-destructive);

      & > svg {
        color: inherit !important;
      }
    }

    /* Focus */
    &:focus {
      background-color: var(--color-accent);
      color: var(--color-accent-foreground);

      &[data-variant="destructive"] {
        background-color: color-mix(
          in oklch,
          var(--color-destructive) 10%,
          transparent
        );
        color: var(--color-destructive);
      }
    }

    /* Inset */
    &[data-inset] {
      padding-inline-start: calc(var(--spacing) * 8);
    }

    /* Disabled */
    &[data-disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  .context-menu-checkbox-item,
  .context-menu-radio-item {
    display: flex;
    position: relative;
    align-items: center;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    padding-inline-start: calc(var(--spacing) * 8);
    border-radius: var(--radius-xs);
    outline: none;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    cursor: default;
    user-select: none;
    gap: calc(var(--spacing) * 2);

    /* Icon */
    & > span {
      display: flex;
      position: absolute;
      left: calc(var(--spacing) * 2);
      align-items: center;
      justify-content: center;
      width: calc(var(--spacing) * 3.5);
      height: calc(var(--spacing) * 3.5);
      pointer-events: none;

      & > svg {
        flex-shrink: 0;
        pointer-events: none;
      }
    }

    /* Focus */
    &:focus {
      background-color: var(--color-accent);
      color: var(--color-accent-foreground);
    }

    /* Disabled */
    &[data-disabled] {
      opacity: 0.5;
      pointer-events: none;
    }

    &.context-menu-checkbox-item {
      & > span {
        & svg {
          width: calc(var(--spacing) * 4);
          height: calc(var(--spacing) * 4);
        }
      }
    }

    &.context-menu-radio-item {
      & > span {
        & svg {
          width: calc(var(--spacing) * 2);
          height: calc(var(--spacing) * 2);
          fill: currentcolor;
        }
      }
    }
  }

  .context-menu-label {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);

    /* Inset */
    &[data-inset] {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }

  .context-menu-separator {
    height: 1px;
    margin: var(--spacing) calc(var(--spacing) * -1);
    background-color: var(--color-border);
  }

  .context-menu-shortcut {
    margin-inline-start: auto;
    color: var(--color-muted-foreground);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    line-height: var(--text-xs--line-height);
  }
}
