.public-ui {
  .block.form {
    .row {
      max-width: 100%;

      @media (max-width: #{map-get($grid-breakpoints, md)}) {
        .form-group {
          display: flex;
          max-width: 100%;
          flex-direction: column;

          label {
            position: relative;
            order: 1;
            font-size: 0.777rem;
            line-height: 1.375rem;
            transform: none;
            transform: none;
            white-space: normal;

            &.active {
              font-size: 0.777rem;
              transform: none;
            }
          }

          input,
          textarea,
          .form-input-file {
            order: 2;
          }

          input[type='date'] ~ label {
            font-size: 0.777rem;
            transform: none;
          }

          small.form-text {
            position: relative;
            order: 3;
          }
        }

        .form-input-file {
          .dropzone-placeholder {
            margin-top: 0;
          }
        }
      }
    }

    textarea {
      &.form-control.is-invalid {
        background-position-x: 99% !important;
        background-size: 16px !important;
      }
    }
  }
}

.block.form {
  .block-description {
    margin-bottom: 1rem;
  }

  .card.card-bg:after {
    content: none;
  }

  &,
  .volto-subblocks-wrapper,
  .form-field {
    max-width: 100%;

    .single-block {
      .dragsubblock {
        top: 0.3rem;
        left: -1.7rem;
      }

      &.subblock-draggable {
        transform: unset;

        .ui.basic.button.delete-button {
          top: 0.3rem;
          right: -0.15rem;
          left: unset;
        }
      }
    }
  }

  legend {
    white-space: pre-wrap;
  }

  .bootstrap-select-wrapper {
    > label {
      position: unset;
      margin-bottom: 0;
      line-height: 1.375rem;
      transform: unset;
      white-space: normal;
    }

    &.is-invalid {
      .react-select__control {
        border-bottom-color: $danger !important;

        .react-select__indicators {
          &::after {
            width: 1.65rem;
            height: 20px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            content: '';
          }
        }
      }
    }

    .react-select__menu {
      z-index: 2;
    }
  }

  .bootstrap-checkbox-radio-wrapper {
    padding-right: 2rem;
    background-position: 99% !important;
    background-size: 22px 20px !important;

    legend {
      font-weight: 600;
      line-height: 1.8rem;
    }

    > label {
      position: unset;
      display: block;
      padding: 0 $input-spacing-x;
      margin-bottom: 0.55rem;
      color: $select-label-color;
      font-size: $select-label-size;
      font-weight: $select-label-weight;
      line-height: 1.375rem;
      transform: none;
      white-space: normal;
    }

    small {
      position: unset;
      padding: 0 $input-spacing-x;
      font-size: 0.77rem;
    }

    input[type='checkbox'] ~ label,
    input[type='radio'] ~ label {
      overflow: inherit;
      height: auto;
      margin: 1px 0;
      line-height: 1.875rem;
      white-space: normal;

      @media (max-width: #{map-get($grid-breakpoints, md)}) {
        font-size: 0.875rem;
        line-height: 1.375rem;
      }
    }

    .form-check-group {
      label {
        width: 100%;
      }
    }

    &.is-invalid {
      .form-check-group {
        input[type='checkbox'] + .form-check-label {
          &::after {
            border-color: $danger;
          }
        }

        input[type='radio'] + .form-check-label {
          &::before {
            border-color: $danger;
          }
        }
      }
    }
  }

  .form-group input[type='date'] ~ label {
    font-size: 0.777rem;
    transform: translateY(-75%);
  }

  textarea {
    border: 1px solid rgba(1, 1, 1, 0.1);

    &.form-control.is-invalid {
      background-size: 25px !important;
    }
  }

  .form-input-file {
    .field-file-name {
      align-items: center;
      padding: 0;
    }

    small.form-text {
      position: unset;
    }

    .dropzone-text {
      margin: 0;
    }

    .image-preview {
      max-width: 250px;
      max-height: 150px;
    }

    .delete-button {
      padding: 0.5em;
      border: none;
      background: none;
      box-shadow: none;

      .icon {
        width: 16px;
        height: 16px;
        color: $link-color;
      }
    }

    &:has(input[aria-invalid='true']) {
      .dropzone-placeholder {
        border-color: $danger;
      }

      .file-widget-dropzone {
        position: relative;

        &::before {
          position: absolute;
          top: -21px;
          right: 0;
          width: 1.65rem;
          height: 20px;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          content: '';

          @media (max-width: #{map-get($grid-breakpoints, lg)}) {
            position: relative;
            top: 0;
            display: flex;
            margin-left: auto;
          }
        }
      }
    }
  }

  .static-field.row {
    display: inline-block;
    width: calc(50% - 0.5rem);
  }

  .static-field.row:nth-of-type(2n) {
    margin-left: 1rem;
  }

  .static-field.row .form-group {
    margin-bottom: 2rem;
  }

  fieldset[disabled] {
    margin-bottom: 2rem;
  }
}

.public-ui .form-control:disabled + label,
.public-ui .form-control[readonly] + label {
  @extend .active;
}

.cms-ui .ui.modal.modal_visibility_conditions {
  .column.choice-actions {
    padding-right: 0;
    padding-left: 0;
  }
}

.cms-ui .ui.page.modals.dimmer {
  .ui.modal.modal_visibility_conditions {
    .content {
      min-height: 50vh;
      overflow-y: auto;
    }
  }
}

.grecaptcha-badge {
  bottom: 115px !important;
}

.cms-ui {
  .ui.tab.container {
    .dt-wrapper {
      button.ui.button {
        width: auto;
        padding: 1.2rem;
      }

      .dt-wrapper-table .ui.table {
        font-size: 0.9rem;
      }
    }
  }
}