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

:host {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.wrapper {
  --bg-color: var(--alert-alarm-color);
  --thickness: var(--global-size-spacing-border-weight-alertframe);
  color: var(--on-alarm-active-color);
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(
    var(--ui-components-button-border-radius) + var(--thickness) / 2
  );
  outline: var(--thickness) solid var(--bg-color);
  outline-offset: calc(-1 * var(--thickness));
}

.wrapper.thickness-small {
    --thickness: 2px;
  }

.wrapper.warning {
    --bg-color: var(--alert-warning-color);
    color: var(--on-warning-active-color);
  }

.wrapper.caution {
    --bg-color: var(--alert-caution-color);
    color: var(--on-caution-active-color);
  }

.wrapper.sharp-edge-top-left {
    border-top-left-radius: 0;
  }

.wrapper.sharp-edge-top-right {
    border-top-right-radius: 0;
  }

.wrapper.sharp-edge-bottom-left {
    border-bottom-left-radius: 0;
  }

.wrapper.sharp-edge-bottom-right {
    border-bottom-right-radius: 0;
  }

.flap {
  position: absolute;
  background-color: var(--bg-color);
  border-radius: 0px var(--app-components-alert-frame-small-flip-border-radius)
    var(--app-components-alert-frame-small-flip-border-radius) 0px;
  padding: var(--app-components-badge-padding);

  display: flex;
  gap: 2px;
}

.flap.small {
    top: 0;
    right: calc(
      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
        var(--app-components-badge-padding) * 2
    );
  }

.flap .mask {
    position: absolute;
    width: var(--ui-components-button-border-radius);
    height: var(--ui-components-button-border-radius);
    background-color: var(--bg-color);
  }

.up:is(.flap .mask) {
      width: calc(var(--ui-components-button-border-radius) + 1px);
      top: 0;
      left: calc(-1 * var(--ui-components-button-border-radius));
      clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        calc(100% - var(--thickness)) 50%,
        50% var(--thickness)
      );
    }

.down:is(.flap .mask) {
      width: calc(var(--ui-components-button-border-radius) + 1px);
      bottom: 0;
      left: calc(-1 * var(--ui-components-button-border-radius));
      clip-path: polygon(
        0 100%,
        100% 100%,
        100% 0,
        50% calc(100% - var(--thickness)),
        calc(100% - var(--thickness)) 50%
      );
    }

.left:is(.flap .mask) {
      height: calc(var(--ui-components-button-border-radius) + 1px);
      top: calc(-1 * var(--ui-components-button-border-radius));
      left: 0;
      clip-path: polygon(
        0 0,
        0 100%,
        100% 100%,
        50% calc(100% - var(--thickness)),
        var(--thickness) 50%
      );
    }

.top .left:is(.flap .mask) {
        top: unset;
        bottom: calc(-1 * var(--ui-components-button-border-radius));
        clip-path: polygon(
          0 0,
          100% 0,
          var(--thickness) 50%,
          50% var(--thickness),
          0 100%
        );
      }

.right:is(.flap .mask) {
      height: calc(var(--ui-components-button-border-radius) + 1px);
      top: calc(-1 * var(--ui-components-button-border-radius));
      right: 0;
      clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%,
        50% calc(100% - var(--thickness)),
        calc(100% - var(--thickness)) 50%
      );
    }

.top .right:is(.flap .mask) {
        top: unset;
        bottom: calc(-1 * var(--ui-components-button-border-radius));
        clip-path: polygon(
          0 0,
          100% 0,
          100% 100%,
          50% var(--thickness),
          calc(100% - var(--thickness)) 50%
        );
      }

.flap.large {
    flex-direction: column;
    top: 0;
    bottom: 0;
    right: calc(
      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
        var(--app-components-badge-padding) * 2
    );
    border-radius: 0px
      var(--app-components-alert-frame-large-flip-border-radius)
      var(--app-components-alert-frame-large-flip-border-radius) 0px;
  }

.flap.bottom,.flap.top {
    left: 0;
    right: 0;
    padding: var(--app-components-alert-frame-large-flip-padding-vertical)
      var(--app-components-alert-frame-large-flip-4px-padding-horizontal);
    bottom: calc(
      var(--thickness) / 2 - var(--global-typography-ui-label-line-height) -
        var(--app-components-alert-frame-large-flip-padding-vertical) * 2
    );
    border-radius: 0px 0px var(--button-border-radius-bottom-right)
      var(--button-border-radius-bottom-right);
    align-items: center;

    font-family: var(--font-family-main);

    font-weight: var(--font-weight-regular);

    font-size: var(--global-typography-ui-label-font-size);

    line-height: var(--global-typography-ui-label-line-height);

    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    font-weight: var(--font-weight-regular);
  }

:is(.flap.bottom,.flap.top) .spacer {
      flex: 1;
    }

.text-size-large :is(.flap.bottom,.flap.top) {
      font-family: var(--font-family-main);
      font-weight: var(--global-typography-ui-body-font-weight);
      font-size: var(--global-typography-ui-body-font-size);
      line-height: var(--global-typography-ui-body-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      bottom: calc(
        var(--thickness) / 2 - var(--global-typography-ui-body-line-height) -
          var(--app-components-alert-frame-large-flip-padding-vertical) * 2
      );
    }

:is(.text-size-large :is(.flap.bottom,.flap.top)) .label {
        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;
      }

.flap.top {
    bottom: unset !important;
    top: calc(
      var(--thickness) / 2 - var(--global-typography-ui-label-line-height) -
        var(--app-components-alert-frame-large-flip-padding-vertical) * 2
    );
    border-radius: var(--button-border-radius-bottom-right)
      var(--button-border-radius-bottom-right) 0px 0px;
  }

.text-size-large .flap.top {
      top: calc(
        var(--thickness) / 2 - var(--global-typography-ui-body-line-height) -
          var(--app-components-alert-frame-large-flip-padding-vertical) * 2
      );
    }

.flap .label {
    flex-shrink: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

::slotted([slot="label"]) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  width: var(--app-components-alert-frame-icon-size);
  height: var(--app-components-alert-frame-icon-size);
  display: block;
  flex-shrink: 0;
}
`;
export {
  compentStyle as default
};
//# sourceMappingURL=alert-frame.css.js.map
