/**
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */

.form-horizontal {
  .card-body {
    padding: 1.875rem $card-spacer-x;
  }

  .form-wrapper {
    padding: 0 $spacer * 0.5;

    @include media-breakpoint-up(sm) {
      width: 83%;
      margin: auto;
    }
  }

  .form-check-radio {
    padding-top: calc(0.375rem + 1px);
  }

  .form-group {
    > .alert {
      margin-top: 0.75rem;
    }
  }

  .form-group.row {
    margin-bottom: 1.2rem;

    // label column in forms
    > .form-control-label:first-of-type:not(.label-on-top) {
      @extend .col-sm-4;
      @extend .col-form-label;
      display: inline;

      .text-danger {
        margin-right: 0.5rem;
      }

      @include media-breakpoint-up("sm") {
        justify-content: flex-end;
        padding-right: 25px;
        text-align: right;
      }

    }

    &.type-hidden {
      display: none;
    }

    .form-control-label.disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }

  .col-sm.disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  // make ps-switch align with label
  span.ps-switch:not(.ps-switch-lg) {
    @include media-breakpoint-up("sm") {
      margin-top: 7px;
    }
  }

  // small size form controls
  .size-small {
    width: 150px;
  }

  .custom-file {
    input {
      outline: none;
    }
  }
}

.invalid-feedback-container {
  padding-top: 8px;
}

.modal {
  > form {
    display: initial;

    .modal-dialog {
      top: 45%;
    }
  }
}

.form-group.inline-switch-widget {
  display: flex;
  flex-direction: row;
  gap: 1rem;

  > * {
    width: auto;
  }

  > .input-group {
    min-width: 35px;
    margin-top: -7px;
  }
}

[class*="form-columns-"] {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;

  > .form-group {
    width: 100%;
    margin: 0.5rem 1rem;
  }

  @for $i from 2 through 12 {
    &.form-columns-#{$i} {
      > .form-group {
        max-width: calc(100% / #{$i} - 2rem);

        &.form-column-breaker {
          flex-basis: 100%;
          max-width: 100%;
          height: 0;
        }

        @include media-breakpoint-down("sm") {
          max-width: inherit;
        }
      }
    }
  }
}

.modify-all-shops {
  display: none;
  margin-top: 5px;
  margin-left: 10px;

  &.multi-shop-field-focused,
  &.multi-shop-focused,
  &.multi-shop-updated {
    display: block;
  }
}

/**
 * Style related to the accordion form type
 */
.accordion-form {
  .card {
    margin-bottom: 0;
    overflow: initial;
    border: none;
    box-shadow: none;

    .card-header {
      padding: 0;
      margin-bottom: 0.5rem;
      color: $dark-gray;
      background-color: $background-grey;
      @include border-radius(6px);

      button {
        padding: 0.7rem 1rem;
      }
    }

    .accordion-form-button {
      display: flex;
      flex-direction: row;
      align-content: flex-end;
      width: 100%;

      span.accordion-form-button-label {
        margin-right: auto;
        font-size: 1rem;
        font-weight: 700;
      }

      span.accordion-form-button-sub-label {
        margin-right: 1rem;
        font-size: 0.875rem;
        font-weight: 400;
      }

      i.material-icons::after {
        content: "keyboard_arrow_up";
      }

      &.collapsed {
        i.material-icons::after {
          content: "keyboard_arrow_down";
        }
      }
    }

    .accordion-sub-form {
      > .form-group {
        padding: 0.625rem;
        border-bottom: 1px solid $background-grey;
      }

      > .form-group:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }
    }
  }
}

.btn-collection {
  gap: 10px;
  justify-content: space-between;
}

.text_preview-widget,
.link_preview-widget {
  .input-container {
    padding-top: calc(0.375rem + 1px);
  }
}

.color-widget {
  input[type="color"] {
    height: 1.375rem;
  }
}

.select2-container {
  &:not(.select2-container--bootstrap4) {
    .select2-selection {
      padding: var(--#{$cdk}size-8) var(--#{$cdk}size-32) var(--#{$cdk}size-8) var(--#{$cdk}size-16);
    }
  }
}

.small.form-external-link,
.form-external-link {
  font-weight: 400;

  .btn {
    font-weight: 400;
  }
}

/* Useful mostly in ToggleChildrenChoice to highlight one of the children contains errors */
.form-check-radio.has-error {
  color: var(--#{$cdk}red-300);
}

.pstaggerClosingCross  {
  cursor: pointer;
}
