/**
 *
 * Modules
 *
 */
/**
*
* Modules
*
*/
/**
 *
 * Variables
 *
 */
/**
 *
 * Functions
 *
 */
/**
 *
 * Mixins
 *
 */
/**
 *
 * Rules
 *
 */
:host {
  align-items: center;
  background: var(--ezp-core-surface-tertiary);
  border-radius: 3px;
  box-shadow: var(--ezp-stepper-boxShadowPosition, 0 0 0 1px) var(--ezp-core-outline);
  display: grid;
  gap: var(--ezp-spacing-3);
  grid-template: var(--ezp-stepper-gridTemplate, auto/auto 1fr auto);
  padding: 0 var(--ezp-spacing-2) 0 var(--ezp-spacing-3);
  position: relative;
  z-index: 0;
}
:host(.focused) {
  --ezp-stepper-icon-color: var(--ezp-theme-solid);
  --ezp-stepper-label-color: var(--ezp-theme-solid);
}

:host(.has-icon) {
  --ezp-stepper-gridTemplate: auto / repeat(2, auto) 1fr auto;
}

#toggle {
  background: var(--ezp-stepper-toggle-background, transparent);
  border-radius: 3px;
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
@media (hover: hover) {
  #toggle:hover {
    --ezp-stepper-toggle-background: var(--ezp-core-shade-primary);
  }
}

#icon {
  color: var(--ezp-stepper-icon-color, var(--ezp-core-foreground-secondary));
  pointer-events: none;
}

#label {
  color: var(--ezp-stepper-label-color, var(--ezp-core-foreground-secondary));
  pointer-events: none;
}

#input {
  /**
   *
   * FIXME
   *
   * - adapt font properties
   * - hover / focus state
   *
   */
  -moz-appearance: textfield;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--ezp-core-foreground-primary);
  cursor: inherit;
  font-family: inherit;
  font-feature-settings: "tnum";
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  height: 30px;
  letter-spacing: -0.0062235443em;
  margin: 0;
  outline: none;
  padding: 0;
  pointer-events: none;
  text-align: right;
  width: 100%;
}

#input::-webkit-outer-spin-button,
#input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.buttons {
  display: flex;
}

.button {
  align-items: center;
  appearance: none;
  background: var(--ezp-stepper-button-background, transparent);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  color: var(--ezp-stepper-button-color, var(--ezp-theme-solid));
  cursor: var(--ezp-stepper-button-cursor, pointer);
  display: flex;
  justify-content: center;
  margin: 0;
  outline: none;
  padding: var(--ezp-spacing-1);
}
@media (hover: hover) {
  .button:not(:disabled):hover {
    --ezp-stepper-button-background: var(--ezp-core-shade-primary);
  }
  .button:not(:disabled):active {
    --ezp-stepper-button-background: var(--ezp-core-shade-secondary);
  }
}
.button:disabled {
  --ezp-stepper-button-color: var(--ezp-core-foreground-tertiary);
  --ezp-stepper-button-cursor: default;
}