
@use "scss/buttons";

.rjsf {
    & .btn-add::after {
      @include btn-icon;
      content: "\f055";
    }
    & .array-item-remove::after {
      @include btn-icon;
      content: '\f2ed';
    }
    & .array-item-move-up::after {
      @include btn-icon;
      content: '\f062';
    }
    & .array-item-move-down::after {
      @include btn-icon;
      content: '\f063';
    }
    & h2 {
        font-size: 1em;
    }
    & .field-description {
        color: #6c757d !important;
    }
    & .array-item {
        align-items: flex-end !important;
        margin-bottom: 1rem !important;
        // border: 1px solid #dee2e6 !important;
        // from input-group
        position: relative;
        display: flex;
        flex-wrap: wrap; // For form validation feedback
        // align-items: stretch;
        width: 100%;

        > .form-control,
        > .form-select {
        position: relative; // For focus state's z-index
        flex: 1 1 auto;
        width: 1%;
        min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
        }

        // Bring the "active" form control to the top of surrounding elements
        > .form-control:focus,
        > .form-select:focus {
        z-index: 3;
        }

        // Ensure buttons are always above inputs for more visually pleasing borders.
        // This isn't needed for `.input-group-text` since it shares the same border-color
        // as our inputs.
        .btn {
        position: relative;
        z-index: 2;

        &:focus {
            z-index: 3;
        }
        }
    }
}
