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

* {
  box-sizing: border-box;
}

.point-wrapper {
  width: 0;
  height: 0;
}

.positioning-point.label-bottom {
    top: calc(var(--automation-components-button-touch-target-size) / -2);
    transform: translateX(-50%);
  }

.positioning-point.label-right {
    left: calc(var(--automation-components-button-touch-target-size) / -2);
    transform: translateY(-50%);
  }

.positioning-point.label-top {
    bottom: calc(var(--automation-components-button-touch-target-size) / -2);
    transform: translateX(-50%);
  }

.positioning-point.label-left {
    right: calc(var(--automation-components-button-touch-target-size) / -2);
    transform: translateY(-50%);
  }

.symbol-wrapper {
  position: relative;
  width: var(--automation-components-button-touch-target-size);
  height: var(--automation-components-button-touch-target-size);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.symbol-wrapper.label-bottom {
    align-items: flex-start;
  }

.symbol-wrapper.label-top {
    align-items: flex-end;
  }

.symbol-wrapper.label-right {
    align-items: center;
    justify-content: flex-start;
  }

.symbol-wrapper.label-left {
    align-items: center;
    justify-content: flex-end;
  }

.wrapper {
  padding: var(--automation-components-button-new-state-container-padding);
}

.wrapper.positioning-point {
    position: absolute;
  }

.wrapper .badge-spacer {
    width: 0;
    height: 0;
    transition: all 0.1s ease-in-out;
  }

.wrapper.has-badge-spacer .badge-spacer {
    width: var(--automation-components-button-new-spacer-size);
    height: var(--automation-components-button-new-spacer-size);
  }

.wrapper {

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;

  appearance: none;
  padding: 0;
  margin: 0;
  border-radius: 6px;
}

.wrapper {
            border-color: var(--flat-enabled-border-color);
            background-color: var(--flat-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--flat-enabled-border-color);
            --base-background-color: var(--flat-enabled-background-color);
}

.wrapper:focus {
            outline: none;
}

.wrapper.activated {
            border-color: var(--flat-activated-border-color);
            background-color: var(--flat-activated-background-color);
            --base-border-color: var(--flat-activated-border-color);
            --base-background-color: var(--flat-activated-background-color);
}

@media (hover:hover) {

.wrapper:hover {
                        border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

.wrapper:active {
            border-color: var(--flat-pressed-border-color);
            background-color: var(--flat-pressed-background-color);
}

.wrapper:focus-visible {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

.wrapper:disabled {
            border-color: var(--flat-disabled-border-color);
            background-color: var(--flat-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-flat-disabled-color) !important;
}

.wrapper.disabled {
            border-color: var(--flat-disabled-border-color);
            background-color: var(--flat-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-flat-disabled-color) !important;
}

.wrapper {
  border-width: 0;
}

.wrapper.label-top {
    flex-direction: column-reverse;
  }

.wrapper.label-bottom {
    flex-direction: column;
  }

.wrapper.label-left {
    flex-direction: row-reverse;
  }

.wrapper .progress-ring {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
  }

.badge-top-right,
.badge-top-left,
.badge-bottom-right,
.badge-bottom-left {
  position: absolute;
  z-index: 1;
}

.icon-touch-target {
  position: relative;
  display: flex;
  width: var(--automation-components-button-touch-target-size);
  height: var(--automation-components-button-touch-target-size);
  justify-content: center;
  align-items: center;
}

.icon-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
  width: var(--automation-components-button-new-visual-target-round);
  height: var(--automation-components-button-new-visual-target-round);
}

.icon-holder .icon-primary {
    width: var(--automation-components-button-icon-size);
    height: var(--automation-components-button-icon-size);
  }

:is(.variant-double .icon-holder) .icon-direction {
      width: var(--automation-components-button-icon-double-primary-size);
      height: var(--automation-components-button-icon-double-primary-size);
    }

:is(.variant-double .icon-holder) .icon-primary {
      width: var(--automation-components-button-icon-double-secondary-size);
      height: var(--automation-components-button-icon-double-secondary-size);
    }

.variant-square .icon-holder {
    border-radius: var(--automation-components-button-new-border-radius);
    width: var(--automation-components-button-new-visual-target);
    height: var(--automation-components-button-new-visual-target);
  }

.variant-flat .icon-holder {
    background-color: transparent !important;
    border-color: transparent !important;
  }

:is(.variant-flat .icon-holder) .icon-primary {
      width: var(--automation-components-button-icon-size-flat);
      height: var(--automation-components-button-icon-size-flat);
    }

.icon-holder .icon-silhouette {
    stroke: var(--border-silhouette-color);
    stroke-width: 2;
    position: absolute;
    width: var(--automation-components-button-icon-size-flat);
    height: var(--automation-components-button-icon-size-flat);
    z-index: -1;
  }

.badge-top-right {
  top: 0;
  right: 0;
}

.badge-top-left {
  top: 0;
  left: 0;
}

.badge-bottom-right {
  bottom: 0;
  right: 0;
}

.badge-bottom-left {
  bottom: 0;
  left: 0;
}

.progress .icon-holder {
  border-color: transparent !important;
  background: var(--automation-pipe-primary-color) !important;
}

:is(.progress .icon-holder) .icon-primary {
    width: var(--automation-components-button-icon-size);
    height: var(--automation-components-button-icon-size);
  }

.state-closed .icon-holder {
  border-color: var(--automation-pipe-tertiary-inverted-color);
  background: var(--automation-pipe-primary-inverted-color);
}

.static :is(.state-closed .icon-holder) {
    border-color: var(--automation-pipe-secondary-color);
    background: var(--automation-pipe-primary-inverted-color);
  }

.state-open .icon-holder {
  border-color: var(--automation-pipe-tertiary-color);
  background: var(--automation-pipe-primary-color);
}

.alert-frame {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  bottom: -1px;
}
`;
export {
  compentStyle as default
};
//# sourceMappingURL=automation-button.css.js.map
