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

* {
  box-sizing: border-box;
}

:host {
  display: block;
  width: fit-content;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: var(--instrument-components-readout-padding-vertical)
    var(--instrument-components-readout-padding-horizontal);
}

.wrapper.horizontal {
    flex-direction: row;
    align-items: center;
  }

.wrapper .setpoint,.wrapper .value,.wrapper .label,.wrapper .src {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px var(--instrument-components-readout-padding-horizontal);
  }

.wrapper .setpoint {
    color: var(--instrument-enhanced-secondary-color);
    font-family: var(--global-typography-font-family);
    font-weight: var(
    --global-typography-instrument-value-regular-font-weight-regular
  );
    font-size: var(--global-typography-instrument-value-regular-font-size);
    line-height: var(--global-typography-instrument-value-regular-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    transition: opacity 10ms ease-in-out;
  }

.wrapper.hide-setpoint .setpoint {
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }

.wrapper.horizontal.enhanced .setpoint {
    font-family: var(--global-typography-font-family);
    font-weight: var(
    --global-typography-instrument-value-large-font-weight-regular
  );
    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;
  }

.wrapper .value {
    font-family: var(--global-typography-font-family);
    font-weight: var(
    --global-typography-instrument-value-regular-font-weight-active
  );
    font-size: var(--global-typography-instrument-value-regular-font-size);
    line-height: var(--global-typography-instrument-value-regular-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    padding: 0px var(--instrument-components-readout-padding-horizontal);
    justify-content: end;
  }

:is(.wrapper .value) .value-hint-zero {
      opacity: 0;
      color: var(--border-outline-color);
    }

:is(.wrapper .value) .value-blue {
      color: var(--instrument-enhanced-secondary-color);
    }

.wrapper.show-zero-padding .value-hint-zero {
      opacity: 1;
    }

.wrapper .label {
    justify-content: end;
    gap: var(--instrument-components-readout-icon-spacing);
    color: var(--element-neutral-color);
    text-wrap: nowrap;
  }

:is(.wrapper .label) .tag {
      font-family: var(--global-typography-font-family);
      font-weight: var(--global-typography-instrument-label-font-weight);
      font-size: var(--global-typography-instrument-label-font-size);
      line-height: var(--global-typography-instrument-label-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      width: var(--obc-instrument-field-tag-width);
    }

:is(.wrapper .label) .unit {
      font-family: var(--global-typography-font-family);
      font-weight: var(--global-typography-instrument-unit-font-weight);
      font-size: var(--global-typography-instrument-unit-font-size);
      line-height: var(--global-typography-instrument-unit-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    }

.wrapper.off .label {
    color: var(--element-inactive-color);
  }

.wrapper.horizontal.enhanced {
    height: 48px;
  }

.wrapper.horizontal.enhanced .label {
      flex-direction: column;
      align-items: start;
      justify-content: center;
      gap: 0;
    }

.wrapper.horizontal .label {
      align-items: start;
    }

.wrapper .src {
    font-family: var(--global-typography-font-family);
    font-weight: var(--global-typography-instrument-unit-font-weight);
    font-size: var(--global-typography-instrument-unit-font-size);
    line-height: var(--global-typography-instrument-unit-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    color: var(--element-neutral-color);
    justify-content: end;
    width: var(--obc-instrument-field-source-width);
    box-sizing: content-box;
  }

.wrapper.off .src {
    color: var(--element-inactive-color);
  }

.wrapper.horizontal .src {
    justify-content: start;
  }

.wrapper.horizontal.enhanced .src {
    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;
  }

.wrapper.neutral-color .value-blue {
      color: var(--element-neutral-color);
    }

.wrapper.off .value-blue {
      color: var(--element-inactive-color);
    }

.wrapper.enhanced .value {
      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;
    }

.wrapper .divider {
    height: var(--instrument-components-readout-divider-height-regular);
    width: 1px;
    background-color: var(--border-outline-color);
    border-radius: 1px;
    margin: 0
      calc(var(--instrument-components-readout-padding-horizontal) - 0.5px);
  }

.wrapper.regular .divider {
    height: var(--instrument-components-readout-divider-height-small);
  }

.wrapper:has(.src-picker) .src-divider {
    margin-right: 0;
  }

.wrapper .src:has(.src-picker) {
    padding-left: 0;
  }

.wrapper .src-picker {
    anchor-name: --src-picker;
  }

.wrapper .src-picker::part(visible-wrapper) {
    padding: 0;
    padding-left: calc(
      var(--instrument-components-readout-padding-horizontal) - 0.5px +
        var(--instrument-components-readout-icon-spacing)
    );
    border: 0;
  }

.wrapper .src-picker::part(label) {
    padding: 0;
    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;
    color: var(--element-neutral-color);
  }

.wrapper.center .label {
  justify-content: center;
}

.src-picker-content {
  position: absolute;
  position-anchor: --src-picker;
  top: calc(anchor(bottom) - 8px);
  left: anchor(left);
}
`;
export {
  compentStyle as default
};
//# sourceMappingURL=instrument-field.css.js.map
