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

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--automation-components-badge-new-size);
  height: var(--automation-components-badge-new-size);
  border-radius: var(--automation-components-badge-new-border-radius);
}

.wrapper .badge {
    position: relative;
  }

.wrapper ::slotted([slot="icon-silhouette"]),.wrapper .icon.siluette {
    stroke-width: 2px;
    stroke: var(--border-silhouette-color);
    /* TODO: replace the typo 'siluette' with 'silhouette', probably in Figma as well */
  }

.wrapper:not(.flat) ::slotted([slot="icon-silhouette"]),.wrapper:not(.flat) .icon.siluette {
    display: none;
    /* TODO: replace the typo 'siluette' with 'silhouette', probably in Figma as well */
  }

.wrapper ::slotted(*),.wrapper .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.wrapper.flat .badge {
    width: var(--automation-components-badge-new-icon-size-flat);
    height: var(--automation-components-badge-new-icon-size-flat);
    color: var(--element-neutral-color);
  }

.wrapper.regular {
            border-color: var(--normal-enabled-border-color);
            background-color: var(--normal-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--normal-enabled-border-color);
            --base-background-color: var(--normal-enabled-background-color);
    color: var(--element-inactive-color);
}

.wrapper.regular .badge {
      width: var(--automation-components-badge-new-icon-size);
      height: var(--automation-components-badge-new-icon-size);
    }

.wrapper.enhanced {
            border-color: var(--raised-enabled-border-color);
            background-color: var(--raised-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--raised-enabled-border-color);
            --base-background-color: var(--raised-enabled-background-color);
    color: var(--element-active-inverted-color);
}

.wrapper.enhanced .badge {
      width: var(--automation-components-badge-new-icon-size);
      height: var(--automation-components-badge-new-icon-size);
    }
`;
export {
  compentStyle as default
};
//# sourceMappingURL=automation-badge.css.js.map
