import { css } from "lit";
const compentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }

.card {
  border-radius: 8px;
  background: var(--container-global-color, #fcfcfc);
  /* Shadow/Floating */
  box-shadow: var(--shadow-floating);
  display: flex;
  flex-direction: column;
  padding: var(--app-components-command-menu-padding-vertical)
    var(--app-components-command-menu-padding-horizontal)
    var(--app-components-command-menu-margin-vertical)
    var(--app-components-command-menu-margin-horizontal);
  box-sizing: border-box;
  width: 360px;
  gap: 8px;
}

.title-container {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-semibold);
  font-size: var(--global-typography-ui-overline-font-size);
  line-height: var(--global-typography-ui-overline-line-height);
  letter-spacing: var(--global-typography-ui-overline-letter-spacing);
  font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  color: var(--element-neutral-color);
  padding: var(--app-components-command-menu-margin-vertical)
    calc(
      var(--app-components-command-menu-margin-horizontal) +
        var(--app-components-system-menu-padding-horizontal)
    )
    var(--app-components-command-menu-padding-vertical)
    calc(
      var(--app-components-command-menu-margin-horizontal) +
        var(--app-components-system-menu-padding-horizontal)
    );
}

.command-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--app-components-command-menu-padding-vertical)
    var(--app-components-command-menu-margin-vertical)
    var(--app-components-command-menu-margin-vertical)
    var(--app-components-command-menu-margin-vertical);
}

.value-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: calc(2 * var(--app-components-system-menu-padding-vertical)) 0px;
}

.icon.command {
  width: var(--app-components-command-menu-icon-size-large);
  height: var(--app-components-command-menu-icon-size-large);
  color: var(--element-neutral-color);
}

.in-command .icon.command {
  color: var(--instrument-enhanced-secondary-color);
}

.value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--element-active-color);
}

.value .status {
    font-family: var(--global-typography-font-family);
    font-weight: var(
    --global-typography-instrument-value-large-font-weight-active
  );
    font-size: var(--global-typography-instrument-value-large-font-size);
    line-height: var(--global-typography-instrument-value-large-line-height);
    letter-spacing: var(
    --global-typography-instrument-value-large-letter-spacing
  );
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  }

.value .description {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-main);
    font-weight: var(--global-typography-ui-body-font-weight);
    font-size: var(--global-typography-ui-body-font-size);
    line-height: var(--global-typography-ui-body-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  }

:is(.value .description) .divider {
      width: 1px;
      height: 16px;
      background-color: var(--border-divider-color);
    }

.no-command.has-location .description {
  background: var(--caution-enabled-background-color);
  padding: 0px 8px;
  border-radius: 4px;
}

:is(.no-command.has-location .description) .command-description {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    font-size: var(--global-typography-ui-body-active-font-size);
    line-height: var(--global-typography-ui-body-active-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  }
`;
export {
  compentStyle as default
};
//# sourceMappingURL=command-menu.css.js.map
