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

* {
  box-sizing: border-box;
  user-select: none;
}

.wrapper {
  display: flex;
  width: var(--app-components-floating-message-item-component-width);
  min-height: var(--app-components-notification-menu-item-touch-target);
  padding: var(--app-components-floating-message-item-padding-vertical-single)
    var(--app-components-floating-message-item-padding-horizontal-right)
    var(--app-components-floating-message-item-padding-vertical-single)
    var(--app-components-floating-message-item-padding-horizontal-left);
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: var(--app-components-floating-message-item-border-radius);
  border-bottom: 1px solid var(--border-divider-color);
  background: var(--container-global-color);
  box-shadow: var(--shadow-floating-x) var(--shadow-floating-y)
    var(--shadow-floating-blur) var(--shadow-raised-spread)
    var(--shadow-floating-color);
}

.wrapper .content-container {
    display: flex;
    align-items: flex-start;
    gap: var(--app-components-floating-message-item-label-spacing);
    flex: 1 0 0;
  }

.wrapper .notification-container {
    display: flex;
    padding: var(
        --app-components-floating-message-item-padding-vertical-text-container
      )
      0px;
    align-items: center;
    gap: var(--app-components-floating-message-item-label-spacing);
    flex: 1 0 0;
  }

.wrapper .primary {
    box-sizing: content-box;
    color: var(--on-normal-neutral-color);
    padding: var(
        --app-components-floating-message-item-padding-vertical-text-container
      )
      0px;
    width: var(--app-components-floating-message-item-icon-size-large);
    height: var(--app-components-floating-message-item-icon-size-large);
  }

.wrapper .message-container {
    display: flex;
    padding: 0px var(--app-components-floating-message-item-label-spacing);
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
  }

.wrapper .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }

:is(.wrapper .title-container) .title {
      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;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      flex: 1 0 0;
      overflow: hidden;
      color: var(--on-flat-active-color);
    }

:is(.wrapper .title-container) .timestamp {
      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;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--app-components-floating-message-item-label-spacing);
      color: var(--element-neutral-color);
    }

.wrapper .notification {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    color: var(--element-active-color);
    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;
  }

.wrapper.multi-line {
    height: fit-content;
  }

.wrapper.multi-line .notification {
      max-height: var(
        --app-components-floating-message-item-max-height-text-container
      );
      -webkit-line-clamp: 8;
    }

.wrapper.vertical .action-container {
      display: flex;
      align-items: flex-start;
      gap: var(--app-components-floating-message-item-label-spacing);
    }

.wrapper.vertical .vertical-outer-action-container {
      display: flex;
      align-items: flex-start;
    }

.wrapper.vertical .primary {
      padding: 0;
    }

.wrapper.vertical.multi-line .icon-container {
        align-self: flex-start;
      }

.wrapper.horizontal .notification-container {
      padding-left: var(--app-components-floating-message-item-label-spacing);
      flex-direction: column;
      align-items: flex-start;
      flex: 1 0 0;
      gap: 0;
    }

.wrapper.horizontal .action-container {
      display: flex;
      min-height: var(
        --menu-navigation-components-table-item-touch-target-size
      );
      padding-right: var(
        --app-components-floating-message-item-padding-horizontal-right
      );
      justify-content: center;
      align-items: center;
      gap: var(--app-components-notification-menu-item-label-spacing);
      flex-direction: row;
      flex: 1 1 0;
      width: 100%;
    }

.wrapper.horizontal .action-container obc-button {
      flex: 1 1 0;
      min-width: 0;
    }

.wrapper.horizontal .message-container {
      padding: var(
          --app-components-floating-message-item-padding-vertical-text-container
        )
        0px;
    }

.wrapper.horizontal .horizontal-message-container {
      display: flex;
      align-items: flex-start;
      align-self: stretch;
    }

.wrapper.horizontal .icon-container {
      padding: var(
          --app-components-floating-message-item-padding-vertical-text-container
        )
        0px;
    }

.wrapper.type-regular .icon-container {
      padding: 0;
    }

.wrapper.type-application .icon-container {
      position: relative;
      isolation: isolate;
      box-sizing: content-box;
      display: flex;
      width: var(--app-components-floating-message-item-icon-container-width);
      height: var(--app-components-floating-message-item-icon-container-height);
    }

.wrapper.type-application .icon.primary {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

.wrapper.type-application .round-icon-box {
      display: flex;
      width: var(--ui-components-app-button-visual-size);
      height: var(--ui-components-app-button-visual-size);
      border-radius: 100px;
      justify-content: center;
      align-items: center;
      border: 1px solid var(--normal-enabled-border-color);
      background: var(--normal-enabled-background-color);
      z-index: inherit;
    }

:is(.wrapper.type-application .round-icon-box) ::slotted(*) {
        width: var(--ui-components-app-button-icon-size);
        height: var(--ui-components-app-button-icon-size);
        flex-shrink: 0;
      }

.wrapper.type-application .icon.secondary {
      position: absolute;
      bottom: calc(
        var(
            --app-components-floating-message-item-padding-vertical-text-container
          ) *
          2
      );
      right: 0;
      width: var(--app-components-floating-message-item-icon-size);
      height: var(--app-components-floating-message-item-icon-size);
      z-index: 2;
    }

.wrapper.type-application.vertical.single-line .primary {
        top: 4px;
      }

.wrapper.type-application.vertical.single-line .icon.secondary {
        bottom: 0;
      }

.wrapper.type-application.vertical.multi-line .icon.secondary {
        bottom: var(
          --app-components-floating-message-item-padding-vertical-text-container
        );
      }
`;
export {
  componentStyle as default
};
//# sourceMappingURL=floating-item.css.js.map
