@import '~scss/variables';
@import '~scss/mixins';

.modalBody {
  padding: 0 !important;
  max-height: none;

  .body {
    min-height: 476px;
    max-height: calc(100vh - 214px);
    overflow-y: auto;

    .title {
      width: auto;
      margin-bottom: 20px;
    }

    .wrapper {
      padding: 20px;
      background-color: #ffffff;

      .types {
        width: 315px;

        & > label {
          margin-bottom: 8px;
        }
      }

      .content {
        padding: 12px;
        background: $light-color01;
        border-radius: 4px;
        margin-top: 14px;

        .wrapperContent {
          padding: 12px;
          margin-bottom: 12px;
          background: #ffffff;
          border: 1px solid $light-color06;
          border-radius: 4px;

          .toggle {
            display: inline-block;
            align-items: center;

            :global {
              .toggle {
                width: 32px;
                min-width: 32px;
                height: 16px;
                border-radius: 8px;
                margin-right: 8px;
              }
            }
          }

          .toggleTip {
            margin-top: 12px;
            padding: 12px;
            background: $light-color01;
            border-radius: 4px;
            color: #363e4a;
          }

          :global {
            .form-item {
              .form-item-label {
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}

.modalHead {
  background: #fff;

  .modalTitle {
    display: flex;

    :global {
      .icon {
        margin-right: 8px;
      }
    }

    .modalTitleContent {
      & > div {
        @include TypographyTitleH6(#242e42);
      }

      & > p {
        @include TypographyParagraph(#79879c);
      }
    }
  }
}

.footer {
  padding: 12px 20px;
  border-radius: 0 0 $border-radius $border-radius;
  background-color: $bg-color;
  text-align: right;
}

.objectBg {
  background: $light-color01;
  padding: 12px;
}

.loadBalancer {
  display: flex;
  margin-bottom: 12px;
  align-items: center;

  :global {
    .select {
      width: 396px;
      margin-right: 12px;
    }
  }
  .lbB {
    margin-top: 22px;
  }
}
