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

* {
  box-sizing: border-box;
}

:host {
  display: block;
  max-width: 669px;
}

:host([data-group-item-not-first]) .content-container {
  border-top-width: 0;
}

:host([data-group-item-before-focused]) .content-container {
  border-bottom-width: 0;
}

:host([data-group-item-not-first][data-group-item-focused]) .content-container {
  border-top-width: 1px;
}

:host([data-group-item-focused]) .wrapper {
  z-index: 1;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  --obc-form-item-border-radius: 0px;
}

.wrapper .content-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-inline-start: var(
      --global-size-spacing-list-item-padding-horizontal
    );
    padding-inline-end: var(--global-size-spacing-icon-icon-size-regular);
    gap: var(--global-size-spacing-list-item-padding-horizontal);
    background: var(
      --obc-form-item-bg-color,
      var(--flat-enabled-background-color)
    );
    border: 1px solid
      var(
        --obc-form-item-border-color-default,
        var(--flat-enabled-border-color)
      );
    border-radius: var(
        --obc-form-item-border-radius-top-left,
        var(--obc-form-item-border-radius)
      )
      var(
        --obc-form-item-border-radius-top-right,
        var(--obc-form-item-border-radius)
      )
      var(
        --obc-form-item-border-radius-bottom-right,
        var(--obc-form-item-border-radius)
      )
      var(
        --obc-form-item-border-radius-bottom-left,
        var(--obc-form-item-border-radius)
      );
  }

.type-inactive :is(.wrapper .content-container) {
      padding-inline: 0;
    }

.type-enabled-action-first :is(.wrapper .content-container) {
      gap: var(--global-size-spacing-target-padding);
    }

.type-enabled-action-last :is(.wrapper .content-container) {
      padding-inline-end: var(--global-size-spacing-target-padding);
    }

:host(:hover):not([disabled]) :is(.wrapper .content-container) {
      background: var(--flat-hover-background-color);
      border-color: var(--border-outline-color);
    }

:host(:focus-within):not([disabled]) :is(.wrapper .content-container) {
      background: var(--flat-focused-background-color);
      border-color: var(--flat-focused-border-color);
      border-width: var(--global-size-spacing-border-weight-focusframe, 2px);
    }

:host(:active):not([disabled]) :is(.wrapper .content-container) {
      background: var(--flat-pressed-background-color);
      border-color: var(--border-outline-color);
    }

:host([disabled]) :is(.wrapper .content-container),.type-inactive :is(.wrapper .content-container),.basic-state-disabled :is(.wrapper .content-container) {
      background: var(--flat-disabled-background-color);
      border-color: var(--normal-disabled-border-color);
      border-width: 0;
    }

.basic-state-amplified :is(.wrapper .content-container) {
      background: var(--amplified-enabled-background-color);
    }

.wrapper.has-shader .shader-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      z-index: 0;
    }

.wrapper.has-shader .shader {
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }

.wrapper.has-shader .divider {
      position: absolute;
      inset-inline-start: 0;
      inset-inline-end: 0;
      bottom: 0;
      height: 1px;
      display: var(--obc-form-item-divider-display, block);
      background: var(--border-divider-color);
    }

:host(:hover):not([disabled]) .wrapper.has-shader .divider,:host(:focus-within):not([disabled]) .wrapper.has-shader .divider,:host(:active):not([disabled]) .wrapper.has-shader .divider,:host([disabled]) .wrapper.has-shader .divider,.wrapper.type-inactive.has-shader .divider,.wrapper.basic-state-disabled.has-shader .divider {
    display: none;
  }

.wrapper.has-error .content-container {
      border-color: var(--alert-error-outline-color);
    }

.wrapper.has-error .divider {
      display: none;
    }

.wrapper .leading,.wrapper .trailing {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-components-checkbox-label-spacing);
  }

.type-enabled-action-first :is(.wrapper .leading) {
      gap: var(--global-size-spacing-list-item-item-spacing);
    }

.type-enabled-action-first.has-icon :is(.wrapper .leading) {
      margin-inline-end: var(--global-size-spacing-list-item-item-spacing);
    }

.type-enabled-action-last :is(.wrapper .trailing) {
      margin-inline-start: calc(
        var(--global-size-spacing-list-item-item-spacing) * -1
      );
    }

.wrapper .text {
    position: relative;
    z-index: 1;
    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;
    letter-spacing: -0.1px;
  }

.type-view :is(.wrapper .text),.type-filled-status-first :is(.wrapper .text),.type-filled-status-last :is(.wrapper .text) {
      color: var(--on-flat-neutral-color);
    }

.type-enabled-action-first :is(.wrapper .text),.type-enabled-action-last :is(.wrapper .text) {
      color: var(--on-flat-active-color);
    }

.type-inactive :is(.wrapper .text) {
      color: var(--element-inactive-color);
    }

.wrapper .icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

.wrapper ::slotted([slot="icon"]) {
    display: block;
    width: 24px;
    height: 24px;
  }

.wrapper .status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--element-active-color);
  }

:is(.wrapper .status) obi-check-google,:is(.wrapper .status) obi-check-mixed {
      width: 100%;
      height: 100%;
    }

.wrapper .action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--ui-components-checkbox-touch-target-size);
    flex: 0 0 var(--ui-components-checkbox-touch-target-size);
    order: 1;
  }

.wrapper .error-text {
    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;

    margin: var(--global-size-spacing-target-padding) 0 0
      var(--global-size-spacing-nav-item-and-menus-padding-horizonal-list-item);
    color: var(--alert-error-outline-color);
  }
`;
export {
  componentStyle as default
};
//# sourceMappingURL=form-item.css.js.map
