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

:host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --obc-poi-group-expanded-spacing: 50px;
  --obc-poi-group-top-offset-animation-ms: 100;
  --obc-poi-group-top-offset-animation-delay-ms: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  position: absolute;
  appearance: none;
  border: none;
  background: none;
  margin: 0;
  font: inherit;
  color: inherit;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  padding: var(--maneuvering-components-poi-group-padding-unchecked-top, 6px)
    var(--maneuvering-components-poi-group-padding-unchecked-horizontal, 4px)
    var(--maneuvering-components-poi-group-padding-unchecked-bottom, 2px)
    var(--maneuvering-components-poi-group-padding-unchecked-horizontal, 4px);
  transform: translate3d(var(--obc-poi-group-wrapper-x, 0px), -100%, 0);
  will-change: transform;

  --flat-enabled-border-color: transparent;
  --flat-enabled-background-color: transparent;
  --flat-hover-border-color: var(
    --overlay-flat-hover-border-color,
    rgb(255 255 255 / 12%)
  );
  --flat-hover-background-color: var(
    --overlay-flat-hover-background-color,
    rgb(0 0 0 / 32%)
  );
  --flat-pressed-border-color: var(
    --overlay-flat-active-border-color,
    rgb(255 255 255 / 12%)
  );
  --flat-pressed-background-color: var(
    --overlay-flat-active-background-color,
    rgb(0 0 0 / 48%)
  );
}

.wrapper {
            cursor: pointer;
}

.wrapper:focus {
            outline: none;
}

.wrapper .visible-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.activated .visible-wrapper {
            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 .visible-wrapper {
                        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 .visible-wrapper {
            border-color: var(--flat-pressed-border-color);
            background-color: var(--flat-pressed-background-color);
}

.wrapper:focus-visible .visible-wrapper {
            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 .visible-wrapper {
            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 .visible-wrapper {
            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 {
            cursor: not-allowed;
}

.wrapper.disabled {
            cursor: not-allowed;
}

.wrapper.with-values {
  padding: 0;
}

.visible-wrapper {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 6px;
  bottom: 2px;
  border-radius: var(
    --maneuvering-components-poi-button-border-radius-round,
    1000px
  );
  overflow: clip;
}

.wrapper.with-values .visible-wrapper {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
}

.backdrop {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

:host([data-exiting]) .wrapper,
:host([data-exiting]) .backdrop {
  pointer-events: none;
  opacity: 0;
}

::slotted([data-poi-target]) {
  pointer-events: auto;
}

:host([data-in-poi-layer]) ::slotted([data-poi-target]) {
  position: absolute;
  transform-origin: 50% 50%;
  --obc-poi-layer-target-scale: 1;
  --obc-poi-layer-target-shift: calc(
    (1 - var(--obc-poi-layer-target-scale)) * 100%
  );
  transform: translateX(var(--obc-poi-target-offset-x, 0px))
    scale(var(--obc-poi-layer-target-scale));
  transition: opacity 0.1s ease-out;
}

:host([data-in-poi-layer][data-position-mode="bottom"])
  ::slotted([data-poi-target]) {
  top: auto;
  bottom: 0;
  height: 100%;
  transform: translateX(var(--obc-poi-target-offset-x, 0px))
    translateY(calc(100% - var(--obc-poi-layer-target-shift)))
    scale(var(--obc-poi-layer-target-scale));
}

:host([data-in-poi-layer]) ::slotted([data-poi-target][data-behind]),
:host([data-in-poi-layer]) ::slotted([data-poi-target][data-exiting]) {
  opacity: 0.4;
  --poi-size: 32px;
  --obc-poi-target-icon-opacity: 0;
}

:host([data-in-poi-layer]) ::slotted([data-poi-target][data-front]) {
  opacity: 1;
  --poi-size: 36px;
  --obc-poi-target-icon-opacity: 1;
}

:host([data-in-poi-layer][data-position-mode="bottom"]) .wrapper {
  transform: translate3d(var(--obc-poi-group-wrapper-x, 0px), -100%, 0);
}

::slotted([data-poi-target][data-grouped]) {
  opacity: 1;
  transition: opacity 0.1s ease-out;
}
`;
export {
  componentStyle as default
};
//# sourceMappingURL=poi-group.css.js.map
