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

.wrapper {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-radius: var(--app-components-badge-border-radius);
  padding: calc(var(--app-components-badge-padding) - 1px);
  border: 1px solid var(--alert-alarm-outline-color);
  background: var(--alert-alarm-color);
  width: fit-content;
  height: 16px;
  box-sizing: border-box;
}

.wrapper .badge-icon {
    width: 100%;
    height: 100%;
  }

.wrapper .icon {
    width: var(--app-components-badge-icon-size);
    height: var(--app-components-badge-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

.wrapper .number {
    font-family: var(--font-family-main);
    font-weight: var(--global-typography-ui-label-active-font-weight);
    font-size: var(--global-typography-ui-label-active-font-size);
    line-height: var(--global-typography-ui-label-active-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 var(--app-components-badge-label-spacing) 1px
      var(--app-components-badge-label-spacing);
    height: var(--app-components-badge-icon-size);
    min-width: var(--app-components-badge-icon-size);
  }

.wrapper.size-large {
    display: inline-flex;
    width: fit-content;
    height: 24px;
    min-width: var(--app-components-badge-min-size-large);
    min-height: var(--app-components-badge-min-size-large);

    padding: calc(var(--app-components-badge-padding) - 1px);
    justify-content: center;
    align-items: center;
    background: var(--alert-alarm-color);
  }

.wrapper.size-large .number {
      padding-bottom: 0;
    }

.wrapper.size-large .number-text {
      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;
    }

.wrapper.size-large .icon {
      width: var(--app-components-badge-icon-size-large);
      height: var(--app-components-badge-icon-size-large);
      display: flex;
      align-items: center;
      justify-content: center;
    }

.wrapper.size-large.type-empty {
      min-width: 38px;
      height: 24px;
    }

.wrapper.type-regular {
    color: var(--on-normal-neutral-color);
    background-color: var(--normal-enabled-background-color);
    border-color: var(--normal-enabled-border-color);
  }

.wrapper.type-alarm {
    background-color: var(--alert-alarm-color);
    border-color: var(--alert-alarm-outline-color);
    color: var(--on-alarm-color);
  }

.wrapper.type-warning {
    background-color: var(--alert-warning-color);
    border-color: var(--alert-warning-outline-color);
    color: var(--on-warning-color);
  }

.wrapper.type-caution {
    background-color: var(--alert-caution-color);
    border-color: var(--alert-caution-outline-color);
    color: var(--on-caution-color);
  }

.wrapper.type-running {
    background-color: var(--alert-running-color);
    border-color: var(--alert-running-color);
    color: var(--on-running-color);
  }

.wrapper.type-notification {
    background-color: var(--instrument-enhanced-primary-color);
    border-color: var(--instrument-enhanced-primary-color);
    color: var(--on-selected-active-color);
  }

.wrapper.type-enhance {
    background-color: var(--instrument-enhanced-secondary-color);
    border-color: var(--instrument-enhanced-secondary-color);
    color: var(--on-selected-active-color);
  }

.wrapper.type-empty {
    background-color: var(--flat-enabled-background-color);
    border-color: var(--normal-enabled-border-color);
    min-width: 28px;
  }

.wrapper.type-automation {
    background-color: var(--container-background-color);
    border-color: var(--container-background-color);
    color: var(--on-flat-neutral-color);
  }

.wrapper.variant-flat {
    background-color: var(--flat-enabled-background-color);
    border-color: var(--flat-enabled-background-color);
  }

.wrapper.variant-flat .icon {
      min-width: var(--app-components-badge-icon-size);
      min-height: var(--app-components-badge-icon-size);
    }

.wrapper.variant-flat .icon.type-alarm {
      color: unset;
      border-color: var(--alert-alarm-outline-color);
      background: none;
    }

.wrapper.variant-flat .icon.type-warning {
      color: unset;
      border-color: var(--alert-warning-outline-color);
      background: none;
    }

.wrapper.variant-flat .icon.type-caution {
      color: unset;
      border-color: var(--alert-caution-outline-color);
      background: none;
    }

.wrapper.variant-flat .icon.type-regular {
      color: unset;
      border-color: var(--normal-enabled-border-color);
      background: none;
    }

.wrapper.variant-flat .icon.type-notification {
      color: var(--instrument-enhanced-primary-color);
      border-color: var(
        --instrument-enhanced-primary-outline-color,
        transparent
      );
      background: none;
    }

.wrapper.variant-flat .icon.type-enhance {
      color: var(--instrument-enhanced-secondary-color);
      background: none;
    }

.wrapper.variant-flat .icon.type-regular {
      color: var(--on-normal-neutral-color);
    }

.wrapper.variant-flat .number {
      color: var(--element-active-color);
    }

.wrapper.variant-flat .icon.type-automation {
      color: unset;
      background: none;
    }

.wrapper.variant-flat .icon.type-outline {
      width: var(--app-components-badge-icon-size-flat);
      height: var(--app-components-badge-icon-size-flat);
    }

.wrapper.variant-flat .icon.type-outline + .number {
      color: var(--on-normal-neutral-color);
    }

.icon.type-alarm path {
  stroke: var(--alert-alarm-outline-color);
}

.icon.type-warning circle {
  stroke: var(--alert-warning-outline-color);
}

.icon.type-caution path {
  stroke: var(--alert-caution-outline-color);
}

.icon.type-running path {
  stroke: none;
}
`;
export {
  compentStyle as default
};
//# sourceMappingURL=badge.css.js.map
