.root {
  display: inline-block;
  vertical-align: top;

  &:not([style*='width: 100%']) {
    @supports not (contain: inline-size) {
      @media (max-width: 1024px) {
        width: 50% !important;
      }

      @media (max-width: 768px) {
        width: 100% !important;
      }
    }

    @supports (contain: inline-size) {
      @container lift (max-width: 480px) {
        width: 50% !important;
      }

      @container lift (max-width: 320px) {
        width: 100% !important;
      }
    }
  }

  &-inner {
    padding: 6px 6px 8px 6px;
  }

  &.is-readOnly &-inner-content {
    opacity: 0.75;
  }
  &.is-readOnly &.is-readOnly &-inner-content {
    opacity: 1;
  }
}

.header {
  position: relative;
  padding-bottom: 8px;
  color: var(--alinea-fields-foreground);

  &-title {
    display: inline-block;
    font-weight: 600;
    font-size: 13px;
  }

  &-help {
    font-weight: normal;
    font-style: italic;
    font-size: 12px;

    &.is-error {
      color: var(--alinea-error);
    }
  }

  &.is-large &-title {
    font-size: 20px;
    padding-bottom: 12px;
  }

  &.is-focused &-title {
    color: var(--alinea-foreground);
  }

  &.is-error &-title {
    color: var(--alinea-error);
  }

  &.is-nopadding {
    padding: 0;
  }
}
