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

* {
  box-sizing: border-box;
}

:host {
  display: block;
  width: 640px;
  height: 640px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-outline-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--container-background-color);
  box-shadow: var(--shadow-flat-x) var(--shadow-flat-y) var(--shadow-flat-blur)
    var(--shadow-flat-spread) var(--shadow-flat-color);
}

.wrapper .content-section {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    flex: 0 0 544px;
    max-height: 544px;
  }

:is(.wrapper .content-section) ::slotted(obc-form-group) {
      width: 100%;
      max-width: 100%;
    }

.type-completed :is(.wrapper .content-section) {
      max-height: 100%;
      overflow: visible;
    }

.wrapper .main-section {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
  }

.type-completed :is(.wrapper .main-section) {
      min-height: 100%;
    }

.wrapper .content-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

.wrapper .content-scrollbar {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
  }

.wrapper .content-title,.wrapper ::slotted([slot="content-title"]) {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-150);
    line-height: var(--line-height-150);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    color: var(--element-active-color);
  }

.wrapper .footer-section {
    display: flex;
    align-items: center;
    flex: 0 0 48px;
    height: 48px;
    min-height: 48px;
  }

:is(.wrapper .footer-section) ::slotted(obc-form-footer-container) {
      display: block;
      width: 100%;
      height: 100%;
    }

.wrapper.type-view {
    --obc-form-item-bg-color: var(--container-background-color);
  }

.wrapper.type-enabled {
    --obc-form-item-bg-color: var(--normal-enabled-background-color);
  }

.wrapper.type-inactive {
    --obc-form-item-bg-color: var(--container-background-color);
  }

.wrapper.type-inactive .content-title,.wrapper.type-inactive ::slotted([slot="content-title"]) {
      color: var(--element-inactive-color);
    }

.wrapper.type-inactive .footer-section ::slotted(obc-form-footer-container) {
      --on-flat-neutral-color: var(--on-flat-disabled-color);
    }

.wrapper.type-completed {
    --obc-form-item-bg-color: var(--indent-enabled-background-color);
  }

.wrapper.type-completed .content-scrollbar {
      --indent-enabled-background-color: var(--border-outline-color);
      --obc-scrollbar-track-padding-top: var(
        --menu-navigation-components-scroll-bar-padding
      );
      --obc-scrollbar-track-padding-bottom: var(
        --menu-navigation-components-scroll-bar-padding
      );
    }
`;
export {
  componentStyle as default
};
//# sourceMappingURL=form-container.css.js.map
