:root {
  .eb-form-item-title {
    .eb-form-item-title-hint-must {
      padding-left: 4px;
      color: red;
    }
  }

  .list-group-title > span {
    width: 100%;
    display: block;
  }

  .list {
    margin-top: 0;
    margin-bottom: 0;
  }

  .list.inset {
    margin-top: var(--f7-list-inset-side-margin);
    margin-bottom: var(--f7-list-inset-side-margin);
  }

  .list .item-title {
    a.link {
      color: var(--f7-list-item-title-text-color);
    }
  }

  form.list .eb-input-file-upload {
    position: absolute;
    right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
    bottom: 10px;
    font-size: 12px;
    background-color: var(--f7-text-editor-border-color);
    display: none;
  }

  form.list .item-title {
    --f7-list-item-title-white-space: initial;
    color: var(--f7-label-text-color);
    min-width: 80px;
  }

  form.list .item-after {
    flex-shrink: 1;
    white-space: initial;
  }

  form.list .item-panel-invalid,
  form.list .item-choose-invalid,
  form.list .item-component-invalid {
    color: var(--f7-input-error-text-color);

    .item-title {
      color: var(--f7-input-error-text-color);
    }
  }

  form.list .item-component-invalid-input-text {
    font-size: var(--f7-input-error-font-size);
    line-height: var(--f7-input-error-line-height);
    color: var(--f7-input-error-text-color);
    font-weight: var(--f7-input-error-font-weight);
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  form.list input.input-with-value[disabled] {
    text-align: right;
    font-size: var(--f7-list-item-after-font-size);
    color: var(--f7-list-item-after-text-color);
  }

  form.list div.item-input {
    &.item-input-clear-button {
      span.input-clear-button {
        visibility: hidden;
        right: calc(0px - var(--f7-input-clear-button-size));

        // override the md size: 48*48
        &:before {
          width: auto;
          height: auto;
          margin-left: auto;
          margin-top: auto;
        }
      }
    }

    &.item-input-clear-button.item-input-with-value.item-input-focused {
      input.input-with-value {
        // will cause input's width change in list group
        //padding-right: calc(var(--f7-input-clear-button-size) + 16px);
      }
      span.input-clear-button {
        visibility: visible;
        right: calc(0px - var(--f7-input-clear-button-size));
      }
    }
  }

  form.list .eb-list-group-title {
    position: sticky;
    top: 0;
    margin-top: 0;
    z-index: 20;
    height: var(--f7-list-group-title-height);
    color: var(--f7-list-group-title-text-color);
    font-size: var(--f7-list-group-title-font-size);
    font-weight: var(--f7-list-group-title-font-weight);
    background-color: var(--f7-list-group-title-bg-color);
    line-height: var(--f7-list-group-title-line-height);

    .item-title {
      color: var(--f7-list-group-title-text-color);
      font-size: var(--f7-list-group-title-font-size);
      font-weight: var(--f7-list-group-title-font-weight);
    }
  }

  // form.list div.item-input.item-title-floating-label {
  //   &.item-input-clear-button {
  //     span.input-clear-button {
  //       visibility: hidden;
  //     }
  //   }
  //   &.item-input-clear-button.item-input-with-value.item-input-focused {
  //     input.input-with-value {
  //       padding-right: var(--f7-input-clear-button-size);
  //     }
  //     span.input-clear-button {
  //       visibility: visible;
  //     }
  //   }
  // }

  // form.list div.item-input:not(.item-title-floating-label) {
  //   input {
  //     text-align: right;
  //   }
  //   textarea {
  //     text-align: right;
  //   }
  //   .item-input-error-message {
  //     text-align: right;
  //   }
  //   .item-input-info {
  //     text-align: right;
  //   }

  //   &.item-input-clear-button {
  //     span.input-clear-button {
  //       visibility: hidden;
  //     }
  //   }

  //   &.item-input-clear-button.item-input-with-value.item-input-focused {
  //     span.input-clear-button {
  //       visibility: visible;
  //       left: 0;
  //     }
  //   }
  // }

  // should not set this styles, for inline-labels: align-self:flex-end
  //.list .item-media {
  //padding-top: 0;
  //padding-bottom: 0;
  //}
}
