.fleet-app-details-form {
  container-type: inline-size;

  &__form-frame {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;

    .card {
      display: flex;
      align-items: flex-start;

      gap: 12px;
      flex: 1 0 0;
      align-self: stretch;
    }
  }

  // Design spec that switches to stacked if the parent is < 990px, not including query side panel
  @container (min-width: 926px) {
    // 990px $break-md - 64px padding = 926px
    // @container does not have access to variables outside their scope
    &__form-frame {
      flex-direction: row;
    }
  }

  &__advanced-options-section {
    display: flex;
    flex-direction: column;
    gap: $pad-large;
    align-items: flex-start;
  }

  &__advanced-options-fields {
    width: 100%;
  }

  &__action-buttons {
    display: flex;
    flex-direction: row-reverse;
    gap: $pad-medium;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;

    legend {
      margin-bottom: $pad-small;
      font-size: $x-small;
      font-weight: $bold;
    }
  }

  &__radio-input {
    display: flex;
    flex-direction: column;
    gap: $pad-small;
  }

  .info-banner {
    margin-top: $pad-small;
  }

  .form-fields--disabled {
    @include disabled;
  }
  
}
