.command {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-popover);
  color: var(--color-popover-foreground);
}

.command-input-wrapper {
  display: flex;
  align-items: center;
  height: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 3);
  gap: calc(var(--spacing) * 2);
  border-block-end: 1px solid var(--color-border);

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

  .command-input {
    display: flex;
    width: 100%;
    height: calc(var(--spacing) * 10);
    padding-block: calc(var(--spacing) * 3);
    border: 1px;
    border-radius: var(--radius-md);
    outline: none;
    background-color: transparent;
    color: var(--color-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

    /* Placeholder */
    &::placeholder {
      color: var(--color-muted-foreground);
    }

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

.command-list {
  max-height: 300px;
  overflow: hidden auto;
  scroll-padding-block: var(--spacing);

  .command-group {
    padding: var(--spacing);
    overflow: hidden;
    color: var(--color-foreground);

    [cmdk-group-heading] {
      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
      color: var(--color-muted-foreground);
      font-size: var(--text-xs);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-xs--line-height);
    }

    .command-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);

      /* Selected */
      &[data-selected="true"] {
        background-color: var(--color-accent);
        color: var(--color-accent-foreground);
      }

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

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

    &:not([hidden]) ~ .command-group {
      padding-block-start: 0;
    }
  }

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

  .command-empty {
    padding-block: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-align: center;
  }

  .command-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);
  }
}

.command-dialog {
  padding: 0 !important;
  overflow: hidden;

  .command-input-wrapper {
    height: calc(var(--spacing) * 12);
  }

  .command-list {
    .command-group {
      .command-item {
        padding-block: calc(var(--spacing) * 3);
      }
    }
  }
}
