/* stylelint-disable no-invalid-position-at-import-rule */
@use '@dynamic-forms/core/assets/scss/variables' as variables;
@use '@dynamic-forms/core/assets/scss/mixins' as mixins;
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';

$dynamic-form-errors-margin-top: null !default;

.dynamic-form-wrapper.bootstrap {
  --dynamic-form-errors-color: #f44336;

  .dynamic-form {
    margin: variables.$dynamic-form-margin;

    $blue: variables.$dynamic-form-color-blue;
    $red: variables.$dynamic-form-color-red;
    $enable-rfs: false;
    $h1-font-size: 24px;
    $h2-font-size: 22px;
    $h3-font-size: 20px;
    $headings-font-weight: revert;
    $headings-line-height: revert;

    @import 'bootstrap/scss/reboot';
    @import 'bootstrap/scss/accordion';
    @import 'bootstrap/scss/forms';
    @import 'bootstrap/scss/buttons';
    @import 'bootstrap/scss/button-group';
    @import 'bootstrap/scss/nav';
    @import 'bootstrap/scss/card';
    @import 'bootstrap/scss/modal';

    .input-group {
      > :not(:first-child) {
        .btn {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }

      > :not(:last-child) {
        .btn {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }

      .dynamic-form-add-on {
        bs-dynamic-form-button {
          display: flex;
          height: 100%;
        }

        .dynamic-form-icon-wrapper {
          height: 100%;

          .dynamic-form-icon {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            i.material-icons {
              margin-top: auto;
              margin-bottom: auto;
            }
          }
        }
      }
    }

    &.grid {
      .row {
        bs-dynamic-form-button,
        bs-dynamic-form-icon,
        bs-dynamic-form-modal,
        bs-dynamic-form-accordion,
        bs-dynamic-form-tabs {
          display: contents;
        }
      }
    }

    .dynamic-form-field-errors {
      &.invalid-feedback {
        display: block;
      }
    }

    .dynamic-form-field-hints.form-text {
      display: flex;

      .hint-spacer {
        flex: 1 0 1em;
      }
    }

    .dynamic-form-header {
      @include mixins.dynamic-form-flex-container(
        $width: 100%,
        $margin-top: variables.$dynamic-form-header-margin-top,
        $margin-bottom: variables.$dynamic-form-header-margin-bottom
      );

      .dynamic-form-label {
        @include mixins.dynamic-form-label(
          $font-size: variables.$dynamic-form-label-font-size,
          $font-weight: variables.$dynamic-form-label-font-weight,
          $font-weight-bold: variables.$dynamic-form-label-font-weight-bold
        );
      }

      .dynamic-form-toolbar {
        @include mixins.dynamic-form-toolbar($flex: 1 1 0, $button-space: variables.$dynamic-form-button-space);
      }
    }

    .dynamic-form-errors {
      @include mixins.dynamic-form-errors(
        $color: var(--dynamic-form-errors-color),
        $font-size: variables.$dynamic-form-errors-font-size,
        $margin-top: variables.$dynamic-form-errors-margin-top,
        $margin-bottom: variables.$dynamic-form-errors-margin-bottom
      );
    }

    .dynamic-form-footer {
      @include mixins.dynamic-form-footer(
        $margin-top: variables.$dynamic-form-footer-margin-top,
        $margin-bottom: variables.$dynamic-form-footer-margin-bottom,
        $button-space: variables.$dynamic-form-button-space
      );
    }

    .dynamic-form-group {
      .dynamic-form-group-header {
        @include mixins.dynamic-form-flex-container($width: 100%, $margin-top: 0, $margin-bottom: 0.5rem, $align-items: center);

        .dynamic-form-group-label {
          @include mixins.dynamic-form-label(
            $font-weight: variables.$dynamic-form-label-font-weight,
            $font-weight-bold: variables.$dynamic-form-label-font-weight-bold
          );
        }

        .dynamic-form-group-toolbar {
          @include mixins.dynamic-form-toolbar($flex: 1 1 0, $button-space: variables.$dynamic-form-button-space);
        }
      }

      .dynamic-form-group-errors {
        @include mixins.dynamic-form-errors(
          $color: var(--dynamic-form-errors-color),
          $font-size: variables.$dynamic-form-errors-font-size,
          $margin-top: variables.$dynamic-form-errors-margin-top,
          $margin-bottom: variables.$dynamic-form-errors-margin-bottom
        );
      }

      .dynamic-form-group-footer {
        @include mixins.dynamic-form-footer(
          $margin-top: variables.$dynamic-form-footer-margin-top,
          $margin-bottom: variables.$dynamic-form-footer-margin-bottom,
          $button-space: variables.$dynamic-form-button-space
        );
      }
    }

    .dynamic-form-array {
      .dynamic-form-array-header {
        @include mixins.dynamic-form-flex-container($width: 100%, $margin-top: 0, $margin-bottom: 0.5rem, $align-items: center);

        .dynamic-form-array-label {
          @include mixins.dynamic-form-label(
            $font-weight: variables.$dynamic-form-label-font-weight,
            $font-weight-bold: variables.$dynamic-form-label-font-weight-bold
          );
        }

        .dynamic-form-array-toolbar {
          @include mixins.dynamic-form-toolbar($flex: 1 1 0, $button-space: variables.$dynamic-form-button-space);
        }
      }

      .dynamic-form-array-errors {
        @include mixins.dynamic-form-errors(
          $color: var(--dynamic-form-errors-color),
          $font-size: variables.$dynamic-form-errors-font-size,
          $margin-top: variables.$dynamic-form-errors-margin-top,
          $margin-bottom: variables.$dynamic-form-errors-margin-bottom
        );
      }

      .dynamic-form-array-footer {
        @include mixins.dynamic-form-footer(
          $margin-top: variables.$dynamic-form-footer-margin-top,
          $margin-bottom: variables.$dynamic-form-footer-margin-bottom,
          $button-space: variables.$dynamic-form-button-space
        );
      }
    }

    .dynamic-form-dictionary {
      .dynamic-form-dictionary-header {
        @include mixins.dynamic-form-flex-container($width: 100%, $margin-top: 0, $margin-bottom: 0.5rem, $align-items: center);

        .dynamic-form-dictionary-label {
          @include mixins.dynamic-form-label(
            $font-weight: variables.$dynamic-form-label-font-weight,
            $font-weight-bold: variables.$dynamic-form-label-font-weight-bold
          );
        }

        .dynamic-form-dictionary-toolbar {
          @include mixins.dynamic-form-toolbar($flex: 1 1 0, $button-space: variables.$dynamic-form-button-space);
        }
      }

      .dynamic-form-dictionary-errors {
        @include mixins.dynamic-form-errors(
          $color: var(--dynamic-form-errors-color),
          $font-size: variables.$dynamic-form-errors-font-size,
          $margin-top: variables.$dynamic-form-errors-margin-top,
          $margin-bottom: variables.$dynamic-form-errors-margin-bottom
        );
      }

      .dynamic-form-dictionary-footer {
        @include mixins.dynamic-form-footer(
          $margin-top: variables.$dynamic-form-footer-margin-top,
          $margin-bottom: variables.$dynamic-form-footer-margin-bottom,
          $button-space: variables.$dynamic-form-button-space
        );
      }
    }

    .dynamic-form-control {
      margin-top: 10px;
      margin-bottom: 10px;

      &.readonly {
        label {
          pointer-events: none;
        }

        input,
        select,
        textarea {
          pointer-events: none;
        }

        .form-check {
          label::before {
            pointer-events: none;
          }

          &.form-switch {
            .form-check-input {
              visibility: hidden;
            }
          }
        }
      }

      .btn-group.btn-group-toggle {
        display: block;

        .btn {
          &.disabled {
            pointer-events: none;
          }
        }
      }
    }

    .dynamic-form-icon {
      height: 38px;
      padding: 0.375rem;
    }

    .dynamic-form-modal {
      background-color: rgb(0 0 0 / 50%);

      &.modal {
        display: block;
      }

      .modal-header {
        display: flex;
        align-items: center;
        width: 100%;

        .modal-title {
          &.modal-title-bg {
            font-size: 22px;
            font-weight: bold;
          }

          &.modal-title-md {
            font-size: 20px;
            font-weight: bold;
          }

          &.modal-title-sm {
            font-size: 18px;
            font-weight: bold;
          }
        }

        .modal-toolbar {
          flex: 1 1 0;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;

          dynamic-form-elements {
            display: contents;
          }

          button {
            margin-left: 10px;
            margin-right: 0;
          }
        }
      }

      .modal-footer {
        &.content-end {
          justify-content: flex-end;

          button {
            margin-left: 10px;
            margin-right: 0;
          }
        }

        button {
          margin-left: 0;
          margin-right: 10px;
        }
      }
    }

    .dynamic-form-accordion {
      .accordion-header {
        cursor: pointer;

        &.disabled {
          cursor: default;
          pointer-events: none;
          opacity: 0.5;
        }
      }
    }

    .dynamic-form-tabs {
      .tab-pane {
        padding: 0 10px;
      }
    }
  }
}