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

* {
  box-sizing: border-box;
}

:host {
  height: 0;
  width: 0;
  --obc-poi-overlap: 0;
  --obc-poi-overlap-elements-opacity: 1;
  --obc-poi-label-opacity: 1;
  --obc-poi-label-visibility: visible;
  --obc-poi-overlap-pointer-events: auto;
  --obc-poi-transition-duration: 0.1s;
  --obc-poi-opacity-transition-duration: 0.1s;
  --obc-poi-overlap-object-bg: rgba(255, 255, 255, 0.5);
  --obc-poi-overlap-object-border: rgba(0, 0, 0, 0.3);
  --obc-poi-overlap-wrapper-opacity: 0.6;
  --obc-poi-overlap-data-opacity: 0.6;
  --obc-poi-surface-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
}

:host([overlap-opaque]) {
  --obc-poi-overlap-object-bg: #fff;
  --obc-poi-overlap-object-border: var(--overlay-border-outline-color);
  --obc-poi-overlap-wrapper-opacity: 1;
  --obc-poi-overlap-data-opacity: 1;
}

.wrapper {
  transform: translate(-50%, -100%);
  --obc-poi-color-transition-duration: 0.1s;
  padding: 0;
  position: relative;
  width: fit-content;
  background: transparent;

  display: flex;
  flex-direction: column;
  appearance: none;
  border: none;
  align-items: center;
  justify-content: center;

  user-select: none;
  pointer-events: var(--obc-poi-overlap-pointer-events, auto);
}

.wrapper .poi-object {
    --overlay-container-background-color: #fff;
    --normal-enabled-background-color: #fff;
  }

.wrapper .button-wrapper {
    position: relative;
    width: var(--maneuvering-components-poi-button-touch-target, 48px);
    min-height: var(--maneuvering-components-poi-button-touch-target, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.wrapper.type-enhanced .button-wrapper {
      width: var(--maneuvering-components-poi-button-large-touch-target, 64px);
      height: var(--maneuvering-components-poi-button-large-touch-target, 64px);
    }

.wrapper.type-enhanced .alert-ring {
      width: 57px;
      height: 57px;
      clip-path: path(
        "M28.5 5 A23.5 23.5 0 1 0 28.51 5 Z M 0 0 H 57 V 57 H 0 Z"
      );
    }

/* Overlap state styles - applied via visual state */

:host([value="overlapped"]) .wrapper {
    --obc-poi-overlap-elements-opacity: 0;
    --obc-poi-label-opacity: 0;
    --obc-poi-label-visibility: hidden;
    --obc-poi-overlap-pointer-events: none;
  }

:is(:host([value="overlapped"]) .wrapper) .poi-object {
      --overlay-container-background-color: var(--obc-poi-overlap-object-bg);
      --overlay-border-outline-color: var(--obc-poi-overlap-object-border);
    }

/* Transition for elements that fade */

.wrapper .alert-ring,.wrapper .id-label,.wrapper .selection-frame {
    opacity: var(--obc-poi-overlap-elements-opacity, 1);
    pointer-events: var(--obc-poi-overlap-pointer-events, auto);
    transition: opacity var(--obc-poi-opacity-transition-duration) ease-out;
  }

.wrapper .icon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.wrapper:not(.has-data) .poi-object {
    --obc-poi-object-shadow: var(--obc-poi-surface-shadow);
  }

.wrapper .selection-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.wrapper.alert-none .alert-ring {
      display: none;
    }

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

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

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

.wrapper .alert-ring {
    position: absolute;
    margin: auto;
    width: 41px;
    height: 41px;
    border-radius: 100%;
    border: 0.5px solid var(--alert-caution-outline-color);
    outline: 0.5px solid var(--alert-caution-outline-color);
    outline-offset: -5px;
    /* make the inner center of the ring transparent */
    clip-path: path("M20.5 5 A15.5 15.5 0 1 0 20.51 5 Z M 0 0 H 41 V 41 H 0 Z");
  }

.wrapper .id-label {
    display: inline-flex;
    opacity: var(--obc-poi-label-opacity, 1);
    visibility: var(--obc-poi-label-visibility, visible);
    align-items: center;
    justify-content: center;
    transition: opacity var(--obc-poi-opacity-transition-duration) ease-out;
  }

/* prettier-ignore */

.wrapper:not(.has-data) {
            cursor: pointer;
}

.wrapper:not(.has-data):focus {
            outline: none;
}

.wrapper:not(.has-data) .poi-object::part(background-frame) {
            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:not(.has-data) .poi-object::part(background-frame) {
            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:not(.has-data):hover .poi-object::part(background-frame) {
                        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:not(.has-data):active .poi-object::part(background-frame) {
            border-color: var(--flat-pressed-border-color);
            background-color: var(--flat-pressed-background-color);
}

.wrapper:not(.has-data):focus-visible .poi-object::part(background-frame) {
            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:not(.has-data):disabled .poi-object::part(background-frame) {
            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:not(.has-data) .poi-object::part(background-frame) {
            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:not(.has-data):disabled {
            cursor: not-allowed;
}

.wrapper.disabled:not(.has-data) {
            cursor: not-allowed;
}

.wrapper:not(.has-data) .id-label {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    z-index: 1;
  }

.wrapper:not(.has-data) .poi-object {
    --flat-enabled-background-color: #fff;
    --flat-activated-background-color: #fff;
    --flat-hover-background-color: color-mix(
      in srgb,
      #fff 88%,
      var(--overlay-flat-hover-background-color)
    );
    --flat-pressed-background-color: color-mix(
      in srgb,
      #fff 82%,
      var(--overlay-flat-active-background-color)
    );
  }

.wrapper.has-data {
            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.has-data:focus {
            outline: none;
}

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

.wrapper.has-data: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.has-data: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.has-data.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.has-data {
  transition: none;
}

.wrapper.has-data:hover,
.wrapper.has-data:active,
.wrapper.has-data:focus-visible {
  transition: none;
}

:host([value="overlapped"]) .wrapper.has-data,
:host(:not([value="overlapped"])) .wrapper.has-data {
  transition:
    opacity var(--obc-poi-opacity-transition-duration) ease-out,
    box-shadow var(--obc-poi-transition-duration) ease-out,
    padding-top var(--obc-poi-transition-duration) ease-out;
}

.wrapper:not(.has-data) .poi-object::part(background-frame) {
  border-color: var(--overlay-border-outline-color);
  transition:
    width var(--obc-poi-size-transition-duration, 0.1s) ease-out,
    height var(--obc-poi-size-transition-duration, 0.1s) ease-out,
    bottom var(--obc-poi-size-transition-duration, 0.1s) ease-out;
}

/* Explicit interaction fallback for POI frame. Keeps behavior even if mixin output changes. */

@media (hover: hover) {
  :host(:not([value="overlapped"]))
    .wrapper:not(.has-data):hover
    .poi-object::part(background-frame) {
    background-color: var(--flat-hover-background-color);
  }
}

:host(:not([value="overlapped"]))
  .wrapper:not(.has-data):active
  .poi-object::part(background-frame) {
  background-color: var(--flat-pressed-background-color);
}

:host(:not([value="overlapped"]))
  .wrapper:not(.has-data):focus-visible
  .poi-object::part(background-frame) {
  outline-color: var(--border-focus-color);
  outline-width: var(--global-size-spacing-border-weight-focusframe);
  outline-style: solid;
}

:host([layout="inline"]) .wrapper {
  transform: translate(-50%, -100%);
}

/* Overlap alert color styles */

.alert-caution:is(:host([value="overlapped"]) .wrapper) {
    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
    --overlay-border-outline-color: var(--alert-caution-outline-color);
  }

.alert-caution:is(:host([value="overlapped"]) .wrapper) .poi-object {
    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
    --overlay-border-outline-color: var(--alert-caution-outline-color);
  }

.alert-warning:is(:host([value="overlapped"]) .wrapper) {
    --overlay-container-background-color: var(--alert-warning-color, #fe9413);
    --overlay-border-outline-color: var(--alert-warning-outline-color);
  }

.alert-warning:is(:host([value="overlapped"]) .wrapper) .poi-object {
    --overlay-container-background-color: var(--alert-warning-color, #fe9413);
    --overlay-border-outline-color: var(--alert-warning-outline-color);
  }

.alert-alarm:is(:host([value="overlapped"]) .wrapper) {
    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
    --overlay-border-outline-color: var(--alert-alarm-outline-color);
  }

.alert-alarm:is(:host([value="overlapped"]) .wrapper) .poi-object {
    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
    --overlay-border-outline-color: var(--alert-alarm-outline-color);
  }

:host([value="overlapped"])
  .wrapper.alert-caution
  .poi-object::part(background-frame) {
  background-color: var(--alert-caution-color, #ffdb42);
  border-color: var(--alert-caution-outline-color);
}

:host([value="overlapped"])
  .wrapper.alert-warning
  .poi-object::part(background-frame) {
  background-color: var(--alert-warning-color, #fe9413);
  border-color: var(--alert-warning-outline-color);
}

:host([value="overlapped"])
  .wrapper.alert-alarm
  .poi-object::part(background-frame) {
  background-color: var(--alert-alarm-color, #e30019);
  border-color: var(--alert-alarm-outline-color);
}

::slotted(:not([slot])) {
  width: 100%;
  height: 100%;
}

.wrapper.has-data {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--overlay-border-outline-color);
  background: var(--overlay-container-background-color);
}

.wrapper.has-data .alert-ring {
    position: absolute;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    clip-path: none;
    border-radius: 8px;
    outline: transparent 4px solid;
    border: transparent 5px solid;
    outline-offset: -4.5px;
    background-color: unset;
  }

.alert-none :is(.wrapper.has-data .alert-ring) {
      display: none;
    }

.alert-caution :is(.wrapper.has-data .alert-ring) {
      border-color: var(--alert-caution-outline-color);
      outline-color: var(--alert-caution-color);
    }

.alert-warning :is(.wrapper.has-data .alert-ring) {
      border-color: var(--alert-warning-outline-color);
      outline-color: var(--alert-warning-color);
    }

.alert-alarm :is(.wrapper.has-data .alert-ring) {
      border-color: var(--alert-alarm-outline-color);
      outline-color: var(--alert-alarm-color);
    }

.wrapper.has-data .id-label {
    position: absolute;
    top: -9.5px;
    box-shadow: none;
    z-index: 1;
  }

.wrapper.has-data .poi-object {
    --obc-poi-object-shadow: none;
    flex-shrink: 0;
  }

.wrapper.has-data .relation-wrapper {
    display: flex;
    padding: 0 6px 4px 6px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }

:is(.wrapper.has-data .relation-wrapper) .relation {
      width: var(--maneuvering-components-poi-button-icon-size);
      height: var(--maneuvering-components-poi-button-icon-size);
      color: var(--element-neutral-color);
    }

.wrapper.has-data.is-aton-diamond {
  box-shadow: var(--obc-poi-surface-shadow);
}

.wrapper.has-data.is-aton-diamond .poi-object {
    --obc-poi-aton-object-shadow-opacity: 0;
  }

/* Overlap state for has-data variant - keep layout, hide values */

:host([value="overlapped"]) .wrapper.has-data {
  --obc-poi-overlapped-data-bg: var(--overlay-container-background-color);
  --obc-poi-overlapped-data-border: var(--overlay-border-outline-color);
  opacity: var(--obc-poi-overlap-data-opacity, 0.6);
  padding-top: var(--maneuvering-components-poi-button-overlap-offset-padding);
  box-shadow: var(--obc-poi-surface-shadow);
}

:is(:host([value="overlapped"]) .wrapper.has-data) .button-wrapper {
    visibility: hidden;
    pointer-events: none;
  }

:is(:host([value="overlapped"]) .wrapper.has-data) .data-wrapper,:is(:host([value="overlapped"]) .wrapper.has-data) .relation-wrapper,:is(:host([value="overlapped"]) .wrapper.has-data) .button-wrapper .poi-object,:is(:host([value="overlapped"]) .wrapper.has-data) .button-wrapper .selection-frame {
    opacity: 0;
    pointer-events: none;
  }

:is(:host([value="overlapped"]) .wrapper.has-data) .poi-object {
    --overlay-container-background-color: var(--obc-poi-overlapped-data-bg);
    --overlay-border-outline-color: var(--obc-poi-overlapped-data-border);
  }

:host([value="overlapped"]) .wrapper:not(.has-data) {
  opacity: var(--obc-poi-overlap-wrapper-opacity, 0.6);
}

:host([value="overlapped"]) .wrapper.has-data.alert-caution {
  background: var(--alert-caution-color, #ffdb42);
  border-color: var(--alert-caution-outline-color);
}

:host([value="overlapped"]) .wrapper.has-data.alert-warning {
  background: var(--alert-warning-color, #fe9413);
  border-color: var(--alert-warning-outline-color);
}

:host([value="overlapped"]) .wrapper.has-data.alert-alarm {
  background: var(--alert-alarm-color, #e30019);
  border-color: var(--alert-alarm-outline-color);
}

:host([value="overlapped"]:not([layout="inline"])) .wrapper.has-data {
  width: var(--maneuvering-components-poi-button-touch-target, 48px);
  min-width: var(--maneuvering-components-poi-button-touch-target, 48px);
  max-width: var(--maneuvering-components-poi-button-touch-target, 48px);
  height: 96px;
}

:host([layout="inline"][value="overlapped"]) .wrapper.has-data {
  padding-top: 0;
  height: var(--obc-poi-group-overlap-height, auto);
  transform: translate(
    -50%,
    calc(-100% - var(--obc-poi-group-overlap-shift, 0px))
  );
}

.wrapper.has-data .data-wrapper,
.wrapper.has-data .relation-wrapper,
.wrapper.has-data .button-wrapper .poi-object,
.wrapper.has-data .button-wrapper .selection-frame {
  transition: opacity var(--obc-poi-opacity-transition-duration) ease-out;
}

.data-wrapper {
  opacity: var(--obc-poi-data-content-opacity, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--maneuvering-components-poi-button-data-padding-vertical) 0;
  gap: calc(var(--maneuvering-components-poi-button-data-gap) * 2);
}

.has-header .data-wrapper {
    padding-top: calc(
      var(--maneuvering-components-poi-id-tag-container-height) +
        var(--maneuvering-components-poi-button-data-padding-vertical)
    );
  }

.data-wrapper .data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

:is(.data-wrapper .data) .value {
      color: var(--element-active-color);
      text-align: center;
      font-family: var(--global-typography-font-family);
      font-weight: var(
    --global-typography-instrument-value-small-font-weight-active
  );
      font-size: var(--global-typography-instrument-value-small-font-size);
      line-height: var(--global-typography-instrument-value-small-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    }

:is(.data-wrapper .data) .label {
      color: var(--element-neutral-color);
      text-align: center;
      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;
    }

:is(.data-wrapper .data) .unit {
      color: var(--element-neutral-color);
      text-align: center;
      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;
    }

:is(.data-wrapper .data):not(:last-child)::after {
      content: "";
      position: absolute;
      display: block;
      width: 32px;
      height: 1px;
      bottom: calc(
        var(--maneuvering-components-poi-button-data-gap) * -1 - 0.5px
      );
      border-radius: 1px;
      background-color: var(--overlay-border-outline-color);
    }

.relation-wrapper {
  opacity: var(--obc-poi-data-content-opacity, 1);
}
`;
export {
  compentStyle as default
};
//# sourceMappingURL=poi-button.css.js.map
